jQuery转盘滚动抖动

jQuery carousel scroll jitter

本文关键字：抖动 滚动 jQuery      更新时间：2023-09-26

我的jquery carousel数据幻灯片有问题，我已将其设置为滚动到内容，它可以工作，但当您尝试向上滚动时，页面会抖动。

我能够使用阻止它

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

因为当用户在滚动动画过程中尝试滚动时，滚动位置将在用户和动画之间保持切换，直到动画停止。所以，通过此SO帖子你可以尝试注册mousewheel事件，当人们滚动时会发生，但当js滚动时不会发生，所以你可以尝试登记另一个事件：

// Stop anime when user scrolls
var onMosueWheel = function(e) {
  $('html, body').stop(); 
};
// Register the mousewheel event.
$(document).on('mousewheel', onMosueWheel);

通过chrome开发工具在您的网站上进行测试。

相关文章：