WedX - журнал о программировании и компьютерных науках

Функция Scrolltop трясет сайт при прокрутке вниз

Я столкнулся с проблемой на моем сайте. Я использовал следующую строку в своем javascript

$('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);

вот моя функция javascript

$(document).keydown(function(e){
    if (e.keyCode === 39) { 
        var $next, $selected = $(".current");
            $next = $selected.next('li').length ? $selected.next('li') : $first;
            $selected.removeClass("current");
            $next.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);
            showPage(parseInt($next.text())) 
    }
});


$(document).keydown(function(e){
    if (e.keyCode === 37) { 
            var $prev, $selected = $(".current");

            $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
            $selected.removeClass("current");
            $prev.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);
            showPage(parseInt($prev.text())) 

}
    });

Итак, когда я нажимаю стрелку влево или вправо, он анимируется и прокручивается до указанного div, как и должно быть. Но когда я пытаюсь прокрутить вниз, окна трясутся и не позволяют прокрутить вниз. Я не могу понять проблему и сделать ее более гладкой.

Обновить

вот моя веб-страница

javascript html jquery css
27.05.2014

  • пожалуйста, включите образец вашего HTML, где используются классы, используемые в JS. (например, .single-post-content) 27.05.2014
  • @Ramy Я обновил свой вопрос 27.05.2014
  • Кстати, не я минусовал вопрос. 27.05.2014

Ответы:


1

Похоже, вам нужен простой улов, который отменит анимацию при взаимодействии с пользователем. Что-то вроде этого должно работать:

$(document).on("scroll mousedown DOMMouseScroll mousewheel keydown", function (e) {
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
        $('html, body').stop();
    }
});

Это было изменено из-за связанной проблемы: позволить пользователю прокручивать остановку jquery-анимации scrolltop ?

27.05.2014
  • Я попытался добавить ваш код. Я не думаю, что это сработало. Также я обновил свой вопрос 27.05.2014
  • Я обновил свой пример кода, чтобы запустить stop для правильного селектора. Я проверил на вашем сайте, и он работает. 27.05.2014
  • Да, проблема в том, что анимация прокрутки все еще активна, пока вы пытаетесь прокрутить, что приводит к определенному смещению. если вы ждете пару секунд между нажатием клавиш направления и прокруткой, все работает. использование stop() кажется правильным путем. или уменьшите время анимации 400 вместо 1000 27.05.2014
  • Я думаю, что это все еще немного шатается на хроме. В Safari и Firefox все работает нормально. 27.05.2014

    • 2

    Я думаю, вы можете создать с помощью этого кода

    $('html, body').animate({scrollTop: $(".single-post-content").height()}, 800);

    вместо $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);enter code here

    27.05.2014
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]