javascript - 使用滚动功能时减少闪烁/增加平滑度

Question

我在这个网站上有一个覆盖类型的东西，它使用滚动功能向上移动。但是，在 IE、Firefox 甚至 Chrome 上存在一些问题，我无法弄清楚如何解决...... Chrome 上的问题较小但仍然很明显，尤其是在使用鼠标滚轮时会发生。有没有办法让它更顺畅，或者我应该使用其他方式/工具？非常感谢您的帮助。

笔：https ://codepen.io/anon/pen/bMwrQV

$(document).ready(function() {

  var win = $(window); // Window
  var content = $(".content") // Content jquery element
  var overlay = $(".overlay"); // Overlay jquery element
  var buttonShowWhenVisible = $(".show-when-visible"); // This is the button which will fade in

  var overlayHeight, scrollTop, stopMargin, opacity;

  win.scroll(function(e) {

    scrollTop = win.scrollTop();
    overlayHeight = overlay.outerHeight(); // The height of the overlay
    stopMargin = false;
    opacity = (1 - scrollTop / overlayHeight);

    if(opacity < 0.00 === false)
      overlay.css("opacity", opacity);

    if(scrollTop >= overlayHeight)
      stopMargin = true;

    // Keep adding margin on top so that the element stays in the view until it reached overlayheight
    if(!stopMargin) {
      content.css({
        marginTop: scrollTop
      });
    }

    // If scollTop reached the height of the overlayheight, then it means 
    // that the overlay if at the top of the page. show the button using jquery's fadeIn
    if(scrollTop >= overlayHeight) {        
      buttonShowWhenVisible.fadeIn();
    // When not, then hide the button using jquery's fadeOut
    } else {
      buttonShowWhenVisible.fadeOut();
    }

  });

});

标签： javascriptjqueryhtmlcssscroll

Answer 1

试试这个 JS：（来自：https ://codepen.io/ejingfx/pen/EVvPwz ）

$(document).ready(function(){
            // $fn.scrollSpeed(step, speed, easing);
            jQuery.scrollSpeed(200, 800);
});

// Custom scrolling speed with jQuery
// Source: github.com/ByNathan/jQuery.scrollSpeed
// Version: 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);