我需要在 iOS 和 Android 设备的移动浏览器上为 div # scrolling-disabled 禁用滚动。我不能使用 position: fixed; 技巧，否则它会破坏我的布局。所以我正在处理 touchmove 事件以防止默认操作。下面的代码有效，但前提是您将手指直接拖动到 div # scrolling-disabled 元素中。如果您在 div # window 元素或什至在 div # scrolling-enabled IO 中拖动手指，仍会在后台滚动该元素 ，在本例中，div # scrolling-disabled。
document.querySelector('#scroll-disabled').addEventListener('touchmove', function(event) { event.preventDefault(); });#window
{
display: block;
position: fixed;
margin: 30px;
z-index: 999;
background-color: #fff;
border: 1px solid red;
}
#scroll-enabled
{
height: 100px;
overflow: auto;
border: 1px solid red;
margin: 10px;
}
#scroll-disabled
{
}
p
{
margin: 10px;
}<html>
<body>
<div id="window">
<p><b>Scrolling should be disabled for the DIV element in the background (#scroll-disabled), but should still be possible in the DIV element below (#scroll-enabled).</b></p>
<div id="scroll-enabled">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
</div>
</div>
<div id="scroll-disabled">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
</div>
</body>
</html>这是 JSFiddle:https://jsfiddle.net/56z3aorc/2/
如果您想在手机上试用，还可以直接链接到结果:https://jsfiddle.net/56z3aorc/2/show
最佳答案
我自己找到了解决方案。
- 通过在
touchmove事件监听器上使用event.preventDefault();来禁用主体或所需元素的滚动。 - 这样做之后，您可以通过在
touchmove事件监听器上使用event.stopPropagation();允许在您需要的元素上滚动。 - 如果您需要防止 IO 在可滚动元素的背景中滚动元素(在它完成自己的滚动之后)，只需先执行
event.stopPropagation();然后(如果元素全滚动)执行event.preventDefault();。
我希望它能帮助其他遇到同样问题的人。
关于javascript - 如何防止 IO 中的背景滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57759038/