ホバーでdivコンテンツのjquery垂直スクロールを作成するにはどうすればよいですか？

Question

クリック時ではなく、ホバー上でdivコンテンツの垂直スクロールを作成するにはどうすればよいですか？

これをチェックアウトするexampleフラグの下に右のバーをホバリングしてみてください。マウスが動くようにコンテンツのスクロールを開始します。

私はこれを行う方法がわかりません。

Answer 1

は答えがであることを示していますが、ヒントとしてmousemoveイベントを使用し、パネル内でマウスがどこにあるかを検出する必要があります。 overflow: hidden;と設定し、相対速度をマウスがエッジまでどれだけ近づけるかに移動します。私は2つのdivを使用することをお勧めします - 境界を設定する1つの外部div（このdivのmousemoveを検出する）と、絶対的に配置されたもう1つのdiv。

それはこのようなものになるだろう：

HTML：

<div id='outer'> 
    <div id='inner'> 
     <p>Overflowing content here</p> 
    </div> 
</div> 

CSS：

#outer { 
    height: 200px; 
    width: 150px; 
    position: relative; 
} 

#inner { 
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; 
} 

jQueryの：私は誰かのコードを修正した。この時

$(document).ready(function() { 
    $("#outer").mousemove(function(e) { 
     //Refer to [here][1] to get position of mouse within element. 
     //Get position of mouse within the element, if it is at the top then compare how close it is to 0, if it is at the bottom then compare how close it is to 200px (or whatever you set as the height of the outer container). Slide inner container as appropriate. 
    }); 
}); 

Answer 2

外観：http://jsfiddle.net/n3Q9j/5/