如何使用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>