如何在javascript中启用特定div块的滚动

Question

我已经禁用了页面的窗口滚动，但是我想启用特定div块的滚动。 现在我可以禁用和启用滚动和鼠标滚轮，它工作正常。 但我想在特定的div块中启用滚动。 请告诉我我在哪里弄错了。

编码

  var $window = $(window), previousScrollTop = 0, scrollLock = false; $window.scroll(function(event) { if(scrollLock) { $window.scrollTop(previousScrollTop); } previousScrollTop = $window.scrollTop(); }); $("#template").click(function() { scrollLock = true; disableScroll(); }); $("#close, .clear").click(function() { enableScroll(); scrollLock = false; }); // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = {37: 1, 38: 1, 39: 1, 40: 1}; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function preventDefaultForScrollKeys(e) { if (keys[e.keyCode]) { preventDefault(e); return false; } } function disableScroll() { if (window.addEventListener) window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; window.onmousewheel = document.onmousewheel = preventDefault; window.ontouchmove = preventDefault; document.onkeydown = preventDefaultForScrollKeys; } function enableScroll() { if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false); window.onmousewheel = document.onmousewheel = null; window.onwheel = null; window.ontouchmove = null; document.onkeydown = null; } // enabling scroll for specific div block $('.slide').on('scroll mousewheel touchmove', function(e) { e.preventDefault(); enableScroll(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test">Some text......</div> <div class="slide">I want to enable scroll for this block only</div> 

谢谢前进

Answer 1

您可以使用CSS来做

.test{
      overflow: hidden;
    }
    .slide{
      height: 20px;
      overflow: auto;
    }

 var $window = $(window), previousScrollTop = 0, scrollLock = false; $window.scroll(function(event) { if(scrollLock) { $window.scrollTop(previousScrollTop); } previousScrollTop = $window.scrollTop(); }); $("#template").click(function() { scrollLock = true; disableScroll(); }); $("#close, .clear").click(function() { enableScroll(); scrollLock = false; }); // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = {37: 1, 38: 1, 39: 1, 40: 1}; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function preventDefaultForScrollKeys(e) { if (keys[e.keyCode]) { preventDefault(e); return false; } } function disableScroll() { if (window.addEventListener) window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; window.onmousewheel = document.onmousewheel = preventDefault; window.ontouchmove = preventDefault; document.onkeydown = preventDefaultForScrollKeys; } function enableScroll() { if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false); window.onmousewheel = document.onmousewheel = null; window.onwheel = null; window.ontouchmove = null; document.onkeydown = null; } // enabling scroll for specific div block $('.slide').on('scroll mousewheel touchmove', function(e) { e.preventDefault(); enableScroll(); }); 

 .test{ overflow: hidden; } .slide{ height: 18px; overflow: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="template">Disable</div> <div class="test">Some text......</div> <div class="slide">I want to enable scroll for this block only <br>I want to enable scroll for this block only<br>I want to enable scroll for this block only </div> 

Answer 2

仅适用于垂直滚动：

<div style="overflow-y: scroll">

仅适用于水平滚动：

<div style="overflow-x: scroll">

对彼此而言：

<div style="overflow: scroll">

隐藏滚动条：

使用隐藏值作为溢出属性。