jQuery轮播滚动抖动

Question

我在使用 jquery carousel data-slide 时遇到问题，我已将其设置为滚动到内容并且它可以工作，但是当您尝试向上滚动时，页面会抖动。

我能够使用它来阻止它

e.preventDefault();

但这在轮播标题中产生了其他问题，当它们变得活跃时，它们停止移动和更改类。

这是我的 JS

$(".scrolltotab").click(function(e) {

    var hre = e.currentTarget.href;
    var id = hre.split("#");
    id = id[1];

    $('html, body').animate({
        scrollTop: $("#custom_carousel").offset().top
    }, 1000);

})

$('#custom_carousel').on('slide.bs.carousel', function(evt) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("#custom_carousel").offset().top
    }, 1000);

    $('#custom_carousel .controls li.active').removeClass('active');
    $('#custom_carousel .controls li:eq(' + $(evt.relatedTarget).index() + ')').addClass('active');

})

$(".customnum").keydown(function(e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl+A, Command+A
        (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) ||
        // Allow: home, end, left, right, down, up
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

Answer 1

因为当用户在滚动动画期间尝试滚动时，滚动位置会一直在用户和动画之间切换，直到动画停止。所以，由 This SO post 可以尝试注册mousewheel事件，人滚动时会发生，js滚动时不会发生，所以可以尝试注册另一个事件：

// Stop anime when user scrolls
var onMosueWheel = function(e) {
  $('html, body').stop(); 
};

// Register the mousewheel event.
$(document).on('mousewheel', onMosueWheel);

由 chrome dev-tool 在您的网站上测试。