悬停时垂直滚动而不是单击？ jQuery API

发布于 2024-08-20 21:03:50 字数 888 浏览 8 评论 0原文

我正在使用 jQuery scrollTo 滚动溢出的 div 中的内容。当我单击链接时，div 将垂直滚动其内容。但是，我希望当我将鼠标悬停在链接上而不是单击它们时发生这种效果。

我不相信这是 jQuery 的scrollTo 的一个选项。但是，有一个用于 hover 事件的 jQuery API 方法。

这似乎是一个简单的问题，但是有没有办法通过悬停而不是单击来维护“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

原文

I am using jQuery scrollTo to scroll contents within a div that is overflown. When I click the links, the div will vertically scroll its contents. However, I would like this effect to occur when I hover over the links, instead of click them.

I don't believe this is an option with jQuery's scrollTo. However, there is a jQuery API method for hover event.

This may seem like a simply question, but is there a way to maintain my vertical scrolling functionality of "scrollTo" by hovering over instead of clicking?

Vertical scroll:

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)
        }
    });
});

Hovering:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不寐倦长更 2024-08-27 21:03:50

使用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/

Smooth scrolling with scrollTo plugin:

        $('#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
        });

This will scroll down. It's simpler to make the scroll up button

        $('#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
        });

fiddle example: http://jsfiddle.net/8Nkpr/1/

回复收藏 0 原文

~没有更多了~