0

jQuery scrollToを使用して、オーバーフローしたdiv内のコンテンツをスクロールしています。リンクをクリックすると、divはその内容を垂直方向にスクロールします。ただし、リンクをクリックするのではなく、リンクにカーソルを合わせると、この効果が発生するようにしたいと思います。

これがjQueryのscrollToのオプションだとは思いません。ただし、イベント用のjQueryAPIメソッドがありますhover。

これは単純な質問のように思えるかもしれませんが、クリックする代わりにカーソルを合わせると、「scrollTo」の垂直スクロール機能を維持する方法はありますか？

垂直スクロール：

jQuery(function ($) {
    $.localScroll.defaults.axis = 'y';
    $.localScroll({
        target: '#content',
        // could be a selector or a jQuery object too.
        queue: true,
        duration: 500,
        hash: false,
        onBefore: function (e, anchor, $target) {
            // The 'this' is the settings object, can be modified
        },
        onAfter: function (anchor, settings) {
            // The 'this' contains the scrolled element (#content)
        }
    });
});

ホバリング：

$("#page-wrap li.button").hover(function(){ /* vertically slide here? */ });V
4

1 に答える 1

1

scrollTo プラグインによるスムーズなスクロール:

        $('#page-wrap li.button-down').hover(function(){
            var scrollDistance = $('body').scrollTop();
            var scrollHeight = $('#content').height();
            var windowHeight = $('body').height();
            var scrollSpeed = (scrollHeight - scrollDistance - windowHeight) * 2.5;  // higher than 2.5 is slower, lower is faster
            $('body').scrollTo('100%', scrollSpeed);
        },function(){
            $('body').stop().scrollTo('+=20px', 100);
            // stop on unhover
        });

これは下にスクロールします。スクロールアップボタンを作る方が簡単です

        $('#page-wrap li.button-up').hover(function(){
            var scrollDistance = $('body').scrollTop();
            var scrollSpeed = scrollDistance * 2.5;  // higher than 2.5 is slower, lower is faster
            $('body').scrollTo('0px', scrollSpeed);
        },function(){
            $('body').stop().scrollTo('-=20px', 100);
            // stop on unhover
        });

フィドルの例: http://jsfiddle.net/8Nkpr/1/

于 2012-03-08T23:14:18.877 に答える