Question

我遇到了jquery轮播数据幻灯片的问题，我已将其设置为滚动到内容并且它可以正常工作，但是当您尝试向上滚动时，页面会抖动。

我能够使用

停止它

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在您的网站上进行测试。

jQuery轮播滚动抖动

1 个答案: