Question

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

代码

＆＃13;

  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();
            
    });

＆＃13;

<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>

＆＃13;

感谢提前

Answer 1

您可以使用css

来完成

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

＆＃13;

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();
            
    });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

仅适用于垂直滚动：

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

仅适用于水平滚动：

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

对于两者：

<div style="overflow: scroll">

隐藏滚动条：

对溢出属性使用隐藏值。

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

2 个答案: