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