如何滚动，通过点击元素与JavaScript或jQuery的

Question

我使用此代码禁用滚动，当我点击一些DIV

$('.whatever').click(function() { 
     window.addEventListener("keydown", function(e) { 
      // space and arrow keys 
      if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { 
       e.preventDefault(); 
      } 
     }, false); 
    }); 

现在我想知道，使箭头和空格键我怎么能通过再次点击相同的元素来启用滚动。

我在寻找一种的toogle效果（如果你知道我的意思），启用和禁用这些键用于滚动的同时单击

这实际上是可能的？

Answer 1

1. 除了使用window.addEventListener中的匿名函数，您可以创建一个新的单独的命名函数。

2. 然后你可以使用功能与addEventListener。之后，您可以使用boolean来检查当前状态。当click发生时，您可以检查该值，并且可以使用add或remove,EventListener。

currentlyDisabled = false; 
 

 
$('.whatever').click(function() { 
 
    if (!currentlyDisabled) { 
 
    currentlyDisabled = true; 
 
    window.addEventListener("keydown", preventScroll); 
 
    } else { 
 
    currentlyDisabled = false; 
 
    window.removeEventListener("keydown", preventScroll); 
 
    } 
 
}); 
 

 
function preventScroll(e) { 
 
    // space and arrow keys 
 
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { 
 
    e.preventDefault(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="whatever"> 
 
    Click me! 
 
</button> 
 

 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p> 
 
<p>Lots of paragraphs to show scrolling affect.</p>

注：为了看到效果，你可能不得不片断结果中点击（如在段落之一）然后尝试击中空间酒吧。