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>

01を使用してそれを行うことができます

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

のみ水平スクロールの場合：両方の場合

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

：

<div style="overflow: scroll"> 

は、スクロールバーを非表示にするには：のみ垂直スクロールの場合

Answer 2

使用の値がオーバーフロー属性です。