如何强制用户的鼠标滚动操作到 div，而不是 body？

Question

我知道标题听起来很混乱，但我想要的很简单。在我现在的设计中，当用户单击一个按钮时，'body' 会得到一个 overflow:hidden 的属性，另一个 div 会出现，右边有一个滚动条。

现在，当 div 出现并且用户尝试使用鼠标滚轮滚动时，没有任何反应，因为浏览器 div 不是 'targeted'，因为它可能仍然是试图滚动 body。当然当用户在div内部点击并转动鼠标滚轮，或者使用div的滚动条时，它就会滚动。

我只希望当 div 出现时，它会自动定位，而无需用户在其内部单击，只需开始使用鼠标滚轮滚动 div。

到目前为止，我已经尝试了以下方法：

$( ".div-that-appears" ).focus();

我已将上述代码放在显示 div 的代码之后，但它不起作用。

不确定是否可行，但如果可以，请提供帮助。谢谢！

Answer 1

您可以捕获 mousewheel 事件并在显示时滚动弹出窗口 div - 这有点棘手，因为 wheelDelta 需要正确解析：

解释：

mousewheel - 将在几乎所有浏览器中触发。
DOMMouseScroll - 将在 FireFox (Mozilla) 中触发。

目标是注册滚轮方向和步长（滚动todo的数量）这两个事件的主要区别是如何获取这个值：

mousewheel -> e.originalEvent.wheelDelta
DOMMouseScroll -> e.originalEvent.detail

在 mousewheel 中，为了获得正确的方向，我们需要将 wheelDelta 乘以 -1。将收到的值约为 +-30，如果用户将他的方向盘转动得更快更远，该值将会增加。

在 DOMMouseScroll 中已经设置了正确的方向，但是我们得到的是步进而不是像素，我们收到的值是 +-1 并且如果用户增加到 ~ -+6将他的轮子转得更快更远。因此，为了使这种行为正常化，我们将 .detail 乘以 40 或 30（不介意）。

$(function(){
   var $pop = $('.pop').eq(0);
    $('button').click(function(){
        if (!$pop.is(':visible')) {
          $('body').on('mousewheel DOMMouseScroll',function(e){ 
                var scrollTo = 0;
                e.preventDefault(); 
                if (e.type == 'mousewheel') {
                        scrollTo = (e.originalEvent.wheelDelta * -1);
                } else if (e.type == 'DOMMouseScroll') {
                        scrollTo = 40 * e.originalEvent.detail;
                }
                $pop.scrollTop(scrollTo + $pop.scrollTop());
          });
          $pop.fadeIn();
        } else {
          $pop.fadeOut();
          $('body').unbind('mousewheel DOMMouseScroll');
        }
    });
});

body {
    height:9000px;
}
.pop {
    display:none;
    height:100px; 
    margin:0 auto; 
    width:400px; 
    border:1px solid black;
    overflow-y:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Click</button>
<div class='pop' style="height:100px; margin:0 auto; width:400px; border:1px solid black">
    <br/>kgjskjhkasdlk
    <br/>lkasjdlkjlaskdjlk
    <br/>asdkjlkjlklkj
    <br/>kgjskjhkasdlk
    <br/>lkasjdlkjlaskdjlk
    <br/>asdkjlkjlklkj
    <br/>kgjskjhkasdlk
    <br/>lkasjdlkjlaskdjlk
    <br/>asdkjlkjlklkj
    <br/>kgjskjhkasdlk
    <br/>lkasjdlkjlaskdjlk
    <br/>asdkjlkjlklk
</div>

如何强制用户的鼠标滚动操作到 div，而不是 body？

How to force the user's mouse scrolling action on to a div, instead of body?

html

javascript

css

jquery

scroll