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

问题描述:

我想知道如何禁用滚动(窗口),但允许滚动文本区域。我想这个代码,但它完全禁止一切:如何使用jquery禁用特定元素的滚动

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

你能提供的这个小提琴? – sjahan

+0

也许,你会发现这个问题很有用:[隐藏滚动条在HTML页面上](https://*.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) – 3Dos

试试这个:

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

,并在文本区域中添加:

style="overflow:scroll;" 

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

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

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

<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