主页 / 问题 / 652497
Accepted
Telion
Asked:2020-04-12 00:08:02 +0000 UTC2020-04-12 00:08:02 +0000 UTC

使用 scrollSpeed 平滑滚动

  • 772

我找到了一个使用 Jquery 创建平滑滚动的便捷选项。一切都会好起来的，但有 1 个问题/错误。在中心某处更新页面后，浏览器会自动将我移动到那里，但脚本开发人员显然没有预见到这一点，如果我转动鼠标滚轮，我会移动到页面的最开头。

我已经尝试修复此问题，我发现问题出在root最初始终为 0 的变量的可见性中。我尝试为其设置 wheelDeltaY 或 wheelDelta、deltaY 的高度，但由于某种原因它不起作用.

你能看一下脚本代码并更正它吗？感谢您的关注。

一个JSFiddle上的例子会更方便，下面是按照规则的代码。

$(function() {
        $.scrollSpeed(100, 450);
    });
	
	// Plugin: jQuery.scrollSpeed
// Source: github.com/nathco/jQuery.scrollSpeed
// Author: Nathan Rutzky
// Update: 1.0.2

(function($) {
    
    jQuery.scrollSpeed = function(step, speed, easing) {
        
        var $document = $(document),
            $window = $(window),
            $body = $('html, body'),
            option = easing || 'default',
            root = 0,
            scroll = false,
            scrollY,
            scrollX,
            view;
            
        if (window.navigator.msPointerEnabled)
        
            return false;
            
        $window.on('mousewheel DOMMouseScroll', function(e) {
            
            var deltaY = e.originalEvent.wheelDeltaY,
                detail = e.originalEvent.detail;
                scrollY = $document.height() > $window.height();
                scrollX = $document.width() > $window.width();
                scroll = true;
            
            if (scrollY) {
                
                view = $window.height();
                    
                if (deltaY < 0 || detail > 0)
            
                    root = (root + view) >= $document.height() ? root : root += step;
                
                if (deltaY > 0 || detail < 0)
            
                    root = root <= 0 ? 0 : root -= step;
                
                $body.stop().animate({
            
                    scrollTop: root
                
                }, speed, option, function() {
            
                    scroll = false;
                
                });
            }
            
            if (scrollX) {
                
                view = $window.width();
                    
                if (deltaY < 0 || detail > 0)
            
                    root = (root + view) >= $document.width() ? root : root += step;
                
                if (deltaY > 0 || detail < 0)
            
                    root = root <= 0 ? 0 : root -= step;
                
                $body.stop().animate({
            
                    scrollLeft: root
                
                }, speed, option, function() {
            
                    scroll = false;
                
                });
            }
            
            return false;
            
        }).on('scroll', function() {
            
            if (scrollY && !scroll) root = $window.scrollTop();
            if (scrollX && !scroll) root = $window.scrollLeft();
            
        }).on('resize', function() {
            
            if (scrollY && !scroll) view = $window.height();
            if (scrollX && !scroll) view = $window.width();
            
        });       
    };
    
    jQuery.easing.default = function (x,t,b,c,d) {
    
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    };
    
})(jQuery);
<!DOCTYPE html>
<html><head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
    <h1><b>jQuery.scrollSpeed</b> is a lightweight jQuery extension for
    custom scrolling speed in modern web browsers. Supports vertical or
    horizontal scrolling direction, including user-defined easing.
    Singapore conversation business class, vibrant sharp Swiss Ettinger bespoke
    Lufthansa discerning Toto handsome. Bulletin sleepy conversation hand-crafted
    international. Washlet alluring elegant, Sunspel charming vibrant Swiss the
    best Helsinki liveable lovely Singapore flat white intricate. Boulevard
    Tsutaya discerning uniforms Zürich Sunspel Ettinger perfect first-class St
    Moritz bespoke. Cutting-edge bulletin soft power concierge vibrant the
    best. Ginza charming impeccable, izakaya hand-crafted global Lufthansa soft
    power. Alluring Fast Lane hub, pintxos St Moritz intricate Nordic wardrobe
    first-class boutique Boeing 787. Business class carefully curated global,
    izakaya airport Helsinki Ettinger Melbourne. International cosy liveable
    Sunspel ryokan Washlet ANA signature joy artisanal. Hand-crafted pintxos
    bespoke soft power. Charming lovely pintxos Melbourne Toto bureaux
    Singapore first-class. Impeccable Porter exquisite quality of life
    liveable. Pintxos boulevard ryokan sophisticated handsome Sunspel Baggu
    elegant wardrobe signature Zürich hub Ginza eclectic Beams. Airbus A380
    Shinkansen bespoke, Helsinki Baggu ANA bulletin cutting-edge Swiss Gaggenau
    elegant hand-crafted Singapore. Marylebone St Moritz emerging espresso
    Swiss. Conversation boulevard destination Ettinger, Gaggenau St Moritz
    artisanal sleepy pintxos Beams Shinkansen business class Nordic emerging.
    St Moritz artisanal eclectic the best, joy Baggu Washlet wardrobe Comme des
    Garçons vibrant Beams Swiss. K-pop pintxos liveable exclusive the best
    global smart flat white remarkable Zürich Scandinavian tote bag Baggu
    hand-crafted. Elegant pintxos Baggu Beams Swiss. Elegant Asia-Pacific
    pintxos izakaya bespoke, vibrant flat white exquisite. Intricate
    Scandinavian finest Baggu Gaggenau smart elegant Helsinki Airbus A380
    Swiss. Bureaux smart Nordic, Lufthansa Ginza Singapore extraordinary
    cutting-edge ryokan lovely Comme des Garçons perfect liveable joy Muji.
    Global craftsmanship intricate, flat white Helsinki Winkreative Beams
    izakaya airport ryokan artisanal Ettinger handsome Toto.</h1>

 </body></html>

javascript

1 个回答

  1. Best Answer

    试试这个替换

    root = $document.scrollTop(),

    • 2

相关问题