请看this codepen
角落里有一个红色的正方形。
如果你点击(使用鼠标或触摸板)这个正方形并向下拖动 - 在Mac上的Safari中,.parent
元素将向下滚动。
即使.parent具有overflow-y: hidden;
在所有其他浏览器中都没有滚动。
我如何防止Safari滚动?
作为一个粗略的解决方案,我可以监听滚动并覆盖scrollTop,如果它不是零,但也许有更优雅的解决方案?
请看this codepen
角落里有一个红色的正方形。
如果你点击(使用鼠标或触摸板)这个正方形并向下拖动 - 在Mac上的Safari中,.parent
元素将向下滚动。
即使.parent具有overflow-y: hidden;
在所有其他浏览器中都没有滚动。
我如何防止Safari滚动?
作为一个粗略的解决方案,我可以监听滚动并覆盖scrollTop,如果它不是零,但也许有更优雅的解决方案?
您可以添加一个中间的 div,然后将宽度、高度和溢出属性设置给它。
.parent {
width: 200px;
height: 200px;
border: 1px dashed black;
overflow-x: auto;
overflow-y: hidden;
}
/** intermediary div */
.parent > div {
width: 200%;
height: 100%;
overflow: hidden;
}
.child {
width: 100%; /** this should be 100% **/
height: 200%;
background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
background-size: 50px 50px, 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
<div class="parent">
<div>
<div class="child"></div>
</div>
</div>
或者在父元素中添加 pointer-events:none
。
.parent {
/* This prevents dragging */
pointer-events: none;
width: 200px;
height: 200px;
border: 1px dashed black;
overflow-x: auto;
overflow-y: hidden;
}
.child {
width: 200%;
height: 200%;
background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
background-size: 50px 50px, 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
<div class="parent">
<div class="child"></div>
</div>
pointer-event
➞ pointer-events
。对于我来说,第二个解决方案仍然似乎不起作用,但第一个解决方案非常好。我最喜欢你的第一个解决方案的一点是它实际上并没有阻止在x轴上进行拖动滚动,而只是在框架外部进行拖动滚动,例如在这种情况下是在y轴上。做得好! - Brandon McConnell这绝对是一个有趣的发现!你可能认为这是不可能的,因为你将 overflow-y
设置为 none
。然而,你可以使用以下 JavaScript 阻止此行为并禁止在父元素内进行点击:
const parent = document.querySelector('.parent');
parent.addEventListener('mousedown', e => e.preventDefault());
mousedown
触发的事件中添加 preventDefault()
,您可以防止浏览器评估任何与该点击相关的进一步事件,包括拖动。 在这里它的作用:
const parent = document.querySelector('.parent');
parent.addEventListener('mousedown', e => e.preventDefault());
.parent {
width: 200px;
height: 200px;
border: 1px dashed black;
overflow-x: auto;
overflow-y: hidden;
}
.child {
width: 200%;
height: 200%;
background: linear-gradient(to right bottom, red, tomato), linear-gradient(to bottom, white, black);
background-size: 50px 50px, 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
<div class="parent">
<div class="child"></div>
</div>
使用CSS可以给予pointer-events:none;,从而在点击时避免任何事件的发生。