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

Question

我知道这个标题听起来很困惑，但我想要的很简单。在我现在的设计中，当用户单击一个按钮时，“正文”会获得溢出属性:隐藏，并且会出现另一个 div，它的右边有一个滚动条。

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

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

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

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

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

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

Answer 1

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

解释:

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

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

• 鼠标滚轮 -> 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>