javascript - 如何使用 jQuery 手动滚动 div？

Question

假设您有一个包含大量内容的工具提示，因此需要使其可滚动。当然，您无法将鼠标移至滚动工具提示，因为当您离开光标时工具提示将被隐藏。

<!-- Let's assume this is my tooltip and -->
<div id="scrollableTooltip">
   <p>foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar... ∞ </p>
</div>

<div id="triggerDiv">
    <!-- When I hover and scroll here, I want to scroll my tooltip -->
    <p>Scroll inside me to trigger scroll in div above...</p>
</div>

我尝试了以下方法来定位 mousewheel DOMMouseScroll 事件，然后使用 jQuery 尝试在我的工具提示 div 中触发滚动 - 但没有成功( Please see my JSFiddle ):

$('#triggerDiv')
    .on('mousewheel DOMMouseScroll', function (e){

        console.log("Scroll was triggered...", e);

        // 1. 
        $('#scrollableTooltip').scroll();

        // 2. 
        // $('#scrollableTooltip').trigger('scroll');
  });

CSS

#scrollableTooltip {
  border: 1px solid red;
  height: 100px;
  overflow-y: scroll;
  margin-bottom: 30px;
}

#triggerDiv {
  border: 1px solid red;
  height: 200px;
}

Answer 1

您需要获取可滚动工具提示的当前滚动位置，然后通过滚动增量对其进行调整。

编辑:添加了“preventDefault”以防止目标滚动。

$('#triggerDiv').on('mousewheel DOMMouseScroll', function (e){
    // console.log("Scroll was triggered...", e);

    // 1. 
    $('#scrollableTooltip').scrollTop(e.originalEvent.deltaY + $('#scrollableTooltip').scrollTop());

    // 2. 
    // $('#scrollableTooltip').trigger('scroll', e);

    e.preventDefault();
});

#scrollableTooltip {
  border: 1px solid red;
  height: 100px;
  overflow-y: scroll;
  margin-bottom: 30px;
}

#triggerDiv {
  border: 1px solid red;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Let's assume this is my tooltip and -->
<div id="scrollableTooltip">
   <p>foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar... ∞ </p>
</div>

<div id="triggerDiv">
    <!-- When I hover and scroll here, I want to scroll my tooltip -->
    <p>Scroll inside me to trigger scroll in div above...</p>
</div>