jQuery carousel scroll jitter

Question

I'm having a problem with jquery carousel data-slide, I've set it to scroll to the content and it works but when you try to scroll up, the page jitters.

I was able to stop it using

e.preventDefault();

But that created other problems in the carousel headers, they stopped moving and changing classes when they become active.

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

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

Because when user try to scroll during the scroll animation, then the scroll position will keep switch between user's and animation's until the animation stop. So, by This SO post You can try to register mousewheel event, which happens when people scroll, but not happens when js scroll, so you can try to register another event:

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

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

Tested on your site by chrome dev-tool.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 28 '15 at 16:37

fuyushimoya

9,715
3
27
34

I didn't add `keydown` events to stop the animation when user press `arrowUp` or `arrowDown`, if you also want to prevent that, add `keydown` event and check the keycode in that function. – fuyushimoya Jun 28 '15 at 16:50

jQuery carousel scroll jitter

1 Answers1