3

ページサイズを超えるコンテンツがたくさん含まれているdivがあります。そのため、divの上下にそれぞれ「上矢印画像」と「下矢印画像」を追加できるかどうか疑問に思いました。画像にカーソルを合わせると、divのコンテンツがページをスクロールするのと同じようにスクロールを開始します。しかし、divの横にスクロールバーを表示したくありません。画像にカーソルを合わせたときにのみコンテンツをスクロールしたいのですが。

以下のコードでは、「HOVER ME」divにカーソルを合わせると、divの最後にジャンプします。だから私はスクロール効果があり、その隣にスクロールバーがない同様の機能が欲しいです..それは可能ですか？これはjsfiddleリンクです

HTMLコード：

<a href="#last">Last</a>
<div id="hover"> HOVER ME </div>
<div id="container">
    <div><a name=""></a> One </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name=""></a> Stuff </div>
    <div><a name="last"></a> Last </div>
<br class="clear">
</div>​

CSSコード：

#hover{
   width:200px;
   height:20px;
 border:1px solid #cc0000;   
}
#container{
  width:500px;
  height:300px;
 overflow-y:auto;   
    border:1px solid #000;
}
#container div{
  width:100px;
height:100px;    
    float:left;
}
.clear{
 clear:both;   
}

</ p>

JAVASCRIPT：

$('#hover').hover(function(){
    window.location = '#last';
});​
4

4 に答える 4

2

唯一の変更点は次のとおりです。

$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container')[0].scrollHeight }, 1000);
});​

コンテナーの CSS スタイルで、オーバーフロー プロパティを に変更しましたhidden。

于 2012-12-20T10:20:52.050 に答える
1

なぜ車輪を再発明するのか

jquery プラグインhttp://logicbox.net/jquery/simplyscroll/vertical.htmlを使用できます

于 2012-12-20T10:19:28.703 に答える
1

間隔を設定してから、要素のscrollTopプロパティをアニメーション化してみてください:

$(function() {
    var current_scroll = 0,
        container = $('#container'),
        timer

    $('#hover').hover(function() {  
        timer = window.setInterval(scrollDiv, 30);
    }, function() {  
        window.clearInterval(timer);
    });​​​​​

    function scrollDiv()
    {
        var new_scroll = current_scroll += 10;
        container.scrollTop(new_scroll);
        current_scroll = new_scroll;
    }
});

間隔またはスクロール量を毎回変更して、必要な速度を実現できます。ここで実際のデモをご覧ください > http://jsfiddle.net/tUYKS/

于 2012-12-20T10:21:24.620 に答える
0

このようにして、 のlast divにアクセスし、その div の#containerを見つけて、offset() topスクロールを適用するだけです。

$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container div:last').offset().top }, 1000);
});
于 2012-12-20T10:36:47.287 に答える