慢滚动抖动 [英] Slow Scroll jittery

问题描述

我正在使用此代码: 示例

I am using this code: EXAMPLE

取决于"image-ul"是否完全在浏览器窗口的底部边缘上方，将使div按照应有的不同速度滚动.但是我遇到的问题是，慢速滚动div接近页面顶部时滚动不流畅.它们似乎停滞了片刻，有时甚至朝相反的方向滚动.

Depending on if "image-ul" is fully above the bottom edge of the browser window or not, will make divs scroll at different speeds, as it should. But the problem that I am having is that the scrolling is not smooth when the slow scrolling divs get somewhere close to the top of the page. They seem to stall for a moment, and even scroll in the opposite direction sometimes.

    //
// default speed ist the lowest valid scroll speed.
//
var default_speed = 1;
//
// speed increments defines the increase/decrease of the acceleration
// between current scroll speed and data-scroll-speed
//
var speed_increment = 0.01;
//
// maximum scroll speed of the elements
//
var data_scroll_speed_a = 3; // #sloganenglish
var data_scroll_speed_b = 5; // #image-ul
//
//
//
var increase_speed, decrease_speed, target_speed, current_speed, speed_increments;
$(document).ready(function() {
    $(window).on('load resize scroll', function() {
        var WindowScrollTop = $(this).scrollTop(),
            Div_one_top = $('#image-ul').offset().top,
            Div_one_height = $('#image-ul').outerHeight(true),
            Window_height = $(this).outerHeight(true);
        if (WindowScrollTop + Window_height >= (Div_one_top + Div_one_height)) {
            $('#sloganenglish').attr('data-scroll-speed', data_scroll_speed_a).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_a * speed_increment);
            $('#image-ul').attr('data-scroll-speed', data_scroll_speed_b).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_b * speed_increment);
            $('.slogan-a-line').css('color', 'yellow');
            increase_speed = true;
            decrease_speed = false;
        } else {
            $('#sloganenglish').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed);
            $('#image-ul').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed);
            $('.slogan-a-line').css('color', 'red');
            decrease_speed = true;
            increase_speed = false;
        }
    }).scroll();
});


// data-scroll-speed script
$.fn.moveIt = function() {
    var $window = $(window);
    var instances = [];

    $(this).each(function() {
        instances.push(new moveItItem($(this)));
    });

    window.onscroll = function() {
        var scrollTop = $window.scrollTop();
        instances.forEach(function(inst) {
            inst.update(scrollTop);
        });
    }
}

var moveItItem = function(el) {
    this.el = $(el);
    this.speed = parseInt(this.el.attr('data-scroll-speed'));
    this.current_speed = 1.0;
};

moveItItem.prototype.update = function(scrollTop) {

    target_speed = parseInt(this.el.attr('data-scroll-speed'));
    current_speed = this.current_speed;
    speed_increments = parseFloat(this.el.attr('data-speed-increments'));

    if (increase_speed) {
        if (current_speed < target_speed) {
            current_speed += speed_increments;
        } else {
            current_speed = target_speed;
        }
    } else if (decrease_speed) {
        if (current_speed > default_speed) {
            current_speed -= speed_increments;
        }
        if ($(window).scrollTop() === 0) {
            current_speed = default_speed;
        }
    }
    this.current_speed = current_speed;
    var pos = scrollTop / this.current_speed;
    this.el.css('transform', 'translateY(' + -pos + 'px)');
};

// Initialization
$(function() {
    $('[data-scroll-speed]').moveIt();
});

推荐答案

示例代码对我来说并不慢，因此它可能特定于您的计算机或浏览器.

The sample code wasn't slow for me, so it may be specific to your machine or browser.

但是，您可以做一些事情:

However, there are a few things you can do:

1. 不要在不需要的地方使用jQuery. jQuery比使用本机JS函数(例如document.getElementById)慢得多.

不要重复使用jQuery选择器.每次使用jQuery选择器时，都会降低性能.因此，例如，代替此:

Don't repeatedly use jQuery selectors. Every time you use a jQuery selector, you suffer a performance hit. So for example, instead of this:

function(){
    var Div_one_top = $('#image-ul').offset().top,
    Div_one_height = $('#image-ul').outerHeight(true);
}

执行此操作:

var imageUl = $('#image-ul');
function(){
     imageUl.offset().top,
     imageUl.outerHeight(true);
}

该示例将大大提高性能.每次页面无故滚动时，您都要使用多个jQuery选择器.

This example should increase performance quite a bit. You're doing multiple jQuery selectors every time the page scrolls for no reason.

对性能要求较高的最佳选择是完全切掉jQuery并手动完成.

The best choice for something performance intensive is to cut out jQuery completely and do it by hand.

这篇关于慢滚动抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！