вертикальная прокрутка при наведении вместо щелчка? JQuery API - PullRequest
Новая
       9

вертикальная прокрутка при наведении вместо щелчка? JQuery API

0 голосов
/ 10 февраля 2010

Я использую jQuery scrollTo для прокрутки содержимого в переполненном div. Когда я нажимаю на ссылки, div будет прокручивать содержимое по вертикали. Однако я хотел бы, чтобы этот эффект возникал, когда я наводил курсор на ссылки, а не щелкал по ним.

Я не верю, что это вариант с jQuery scrollTo. Однако для события hover существует метод API jQuery.

Это может показаться простым вопросом, но есть ли способ сохранить мою функцию вертикальной прокрутки "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

1 Ответ

1 голос
/ 09 марта 2012

Плавная прокрутка с плагином 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/

...