Question

我想知道如何禁用滚动（窗口），但允许滚动文本区域。我尝试了这段代码，但它完全禁用了所有内容：

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

Answer 1

这样的设置可能对你有用吗？

<div class="container">
    <h1>heading</h1>
    <div class="scrollable">
        Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll. Text that will scroll.
    </div>
</div>

<style>
.container {height: 110px; width:100px; overflow:hidden;}
.scrollable {overflow:auto;width:100%;height:30px}
</style>

这是一个codepen https://codepen.io/idlethumbs/pen/WZmEgQ

Answer 2

试试这个：

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

在文字区域添加：

style="overflow:scroll;"

Answer 3

一点点样本：https://jsfiddle.net/qepr7exx/1/

根据https://www.w3schools.com/cssref/pr_pos_overflow.asp，溢出不是继承的，但实际上似乎是。只需将其设置回主容器上的overflow: auto即可。

Answer 4

我为手机网页写的...

准备一个防止滚动事件的功能

var touchScroll=function(event){event.preventDefault();};

绑定到某个元素时，当您触摸此元素时，使文档不滚动。

$('#your_element').click(function()
{$(document).bind('touchmove', touchScroll)});
document.ontouchmove=function(e){e.preventDefault();} //Add this for take effect in iOS Safari, confirmed on iOS 12.x

解除绑定

$('#your_element').click(function()
{$(document).unbind('touchmove', touchScroll)});
document.ontouchmove=function(e){return true;} //Restore event in iOS Safari

希望这会有所帮助〜

如何使用jquery禁用特定元素的滚动

4 个答案: