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

Question

我想知道如何禁用滚动（窗口），但允许滚动文本区域。我想这个代码，但它完全禁止一切：

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

Answer 1

试试这个：

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

，并在文本区域中添加：

style="overflow:scroll;" 

Answer 2

一个小例子：https://jsfiddle.net/qepr7exx/1/

根据https://www.w3schools.com/cssref/pr_pos_overflow.asp，溢出不会被继承，但它看起来实际上是。只需将其设置回您的主容器上的一个overflow: auto即可。

Answer 3

像这样的设置可能适合你吗？

<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