Прокрутка глючит после перезагрузки страницы

@Alex-Kir · Регистрация: 04.05.2014

Студворк — интернет-сервис помощи студентам

Доброго времени суток!

Сделал прокрутку по блокам на js, с помощью animate

Вот код, сначала html:

HTML5
1
2
3
<div class="num1"></div>
<div class="num2"></div>
<div class="num3"></div>

p.s блоки во всю высоту экрана

И вот код файла js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$("document").ready(function(){
    var num = 1;
    var scrolling = false;
    
        $(document).bind('mousewheel', function(event) {
                scroll(event);
        });
 
        function scroll(event) {
          event.preventDefault();
              if (!scrolling){
                scrolling = true;
                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                  num--;
                  num = num < 1 ? 1 : num;
                } else {
                  num++;
                  num = num > 3 ? 3 : num;
                }
 
                $('html, body').animate({
                  scrollTop: $(".num" + num).offset().top
                }, 800, "linear", function() {
                  scrolling = false;
                });
              }
        }

Все работает супер, кроме одного нюанса: при перезагрузки страницы переменная num становиться снова =1 (т.е. первый экран), а сама то страница остается на месте.

Решил данный вопрос казалось бы легко: просто вставил

JavaScript
1
$("html,body").animate({scrollTop: "0"}, 800);

И тут начался ад... Она работает раз через раз: иногда срабатывает прокрутка на первый экран и все окей, иногда она прокручивается, а потом резко возвращается на место , где была перед перезагрузкой страницы

Я не понимаю, я уже и в разные места в коде вставлял, и через функцию другую делал и в файл другой выносил эту animate({scrollTop: "0"}

И всегда она работает через раз (не буквально, может 5 раз нормально сделаться, потом 2 раз ненормально и тд).

Суть то в том: что num меняется на 1 (как и должно), и прокрутка начинается с первого экрана программно
А периодически страница "зависает" у человека на экране после загрузки например на num3, он крутит вниз, а она прокручивается на num2, ибо программно то она на num1 переключилась

Буду очень признателен за помощь!

@Mr_Sergo · 21.09.2019, 07:30

Сообщение от Alex-Kir

Буду очень признателен за помощь!

Может сделать как-то так -> https://codepen.io/Mr_Sergo/pen/dybwoYQ ??

HTML5
1
2
3
4
5
<div class="BOX">
    <div class="num"> <img src="https://pp.userapi.com/c850036/v850036046/91b6e/iVbfWvo7PCg.jpg"> </div>
    <div class="num"> <img src="https://pp.userapi.com/c850036/v850036046/91b64/1oOyA25hlwM.jpg"> </div>
    <div class="num"> <img src="https://pp.userapi.com/c850036/v850036046/91b5a/kf_4iXCMr9o.jpg"> </div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let BOX = document.querySelector('.BOX'), canMove = 1, ind = 0;
const move = () => {
    BOX.style.top = -ind*100 + '%';
    --canMove;
}
const onWheel = e => {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    let delta = e.deltaY || e.detail || e.wheelDelta;
    if(delta > 0 && canMove && ind < BOX.querySelectorAll('.num').length-1) move(++ind);
    if(delta < 0 && canMove && ind) move(--ind);
}
BOX.addEventListener('wheel', onWheel );
BOX.addEventListener('transitionend', () => ++canMove );

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html, body {
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
.BOX {
    width: 100%;
    position: relative;
    left: 0px;
    top: 0px;
    transition: 1s;
    -webkit-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
}
 
.num {
    width: 100%;
    height: 100vh;
}

@Alex-Kir · 21.09.2019, 21:39 **[ТС]**

Вооот, вроде идеально, спасибо большое!

Добавлено через 2 часа 41 минуту
Правда вот у меня 9 экраном и периодически, если крутить быстро, то моментами прокручивается на несколько экраном быстро, то есть троттлинга нет (вроде троттлинг это)

Не критично, но все же.. Думаю отключение скроллинга решит вопрос или нет, попробую

@Mr_Sergo · 21.09.2019, 23:26

Сообщение от Alex-Kir

моментами прокручивается на несколько экраном быстро

Что-то вы не так значит делаете потому что я добавил 9 экранов и все работает как положено.

@Alex-Kir · 22.09.2019, 00:54 **[ТС]**

Ну да, оно работает как положено, но если быстро крутить колесико, то оно дергается немного в процессе анимации, едва заметно, может на пиксели там

Однако в силу того, что навряд ли кто-то будет так быстро скроллить (либо это будет случаться редко) + учитывая, что это практически незаметно - все круто

Но тот скроллинг, что был у меня плавнее работает, там вообще не идет реакции на колесико, как бы быстро я не крутил, оно двигается четко раз в указанное время

В силу же лага с обнулением при перезагрузки, я выбираю все же Ваш код, спасибо еще раз

З.Ы. на самом деле, может денвер лагает немного, не уверен, но есть основания полагать

Может еще колесо мышки (хотя связи не должно быть никакой), если крутить маленькими шажками, хоть и быстро, то все ок

Код - 1 в 1 скопирован)

Добавлено через 12 минут
Кстати, момент прокрутки на несколько экранов при быстром скроллинге...
Вопрос решился увеличением времени анимации
Суть в том, что 1с - мало, и при быстром скроллинге прокрутка колесика может попасть четко в окончание анимации )
Т.е. следующий цикл начнется сразу после первого, и это будет выглядеть как сплошная прокрутка на два экрана

Сделал 2с - сложнее стало рандомно попасть на четкое окончание анимации

А почему контент немного дергается... мне кажется проблема в денвере может, с картинками такого не было

Картинки и большие элементы не "рябят", а когда экран с большим кол-вом текста двигается , он немного рябит
И в основном он так делает, когда во время анимации крутишь колесиком

Добавлено через 26 минут
И все таки мне интересно, почему в моем изначальном коде, страница при перезагрузке не возвращается наверх

А когда я ей явно прописываю

JavaScript
1
$("html, body").animate({scrollTop:0},800);

, она делает это через раз (при этом сама переменная num меняется на num1 как и должна)

Есть идея , что это связано как-то с документ реди и подгрузкой яндекс карт, потому что, я заметил, что она скроллится наверх, и идет "ожидание соединения с яндекс.ру", и как только через секунду яндекс догружается, она резко показывает num3

Добавлено через 5 минут
Сейчас на старом коде 8 раз подряд было возвращение к num1 при перезагрузке, а на 9 раз опять резко на num3 перескочило

@Mr_Sergo · 22.09.2019, 01:01

Сообщение от Alex-Kir

может денвер лагает немного

Выкиньте его им давно уже никто не пользуется и его не поддерживают. Сам, давно уже, пользовался, потом установил вместо него openserver- и вам советую. Но не думаю что денвер может как-то влиять на процесс анимации.

Сообщение от Alex-Kir

прокрутка колесика может попасть четко в окончание анимации

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

@Alex-Kir · 22.09.2019, 02:14 **[ТС]**

Я сделал обычную прокрутку, просто все js убрал

Так вот, вставил

JavaScript
1
2
3
4
$("document").ready(function(){
    
    $('body,html').animate({scrollTop: 0}, 800);
});

Данный код должен:

- возвращать нас наверх при перезагрузки страницы, так?

А у меня он скроллит вверх и резко откидывает на место перезагрузки обратно, каждый раз

Добавлено через 57 секунд

Сообщение от Mr_Sergo

Выкиньте его им давно уже никто не пользуется и его не поддерживают. Сам, давно уже, пользовался, потом установил вместо него openserver- и вам советую. Но не думаю что денвер может как-то влиять на процесс анимации.

Согласен пора, но + за то, что не он виноват

Добавлено через 1 минуту
В теориии.. можно сделать все как SPA через js и просто повесить на событие обновления страницы скрипт, ибо проблема присутствует только при F5 и стрелках , при ссылках само собой все ок

Но ради прокрутки наверх делать обработчик на историю.. Ну такое

Считаю, что нужно не анимацию делать тогда наверх при F5, а чтобы не изменялась num, потому что походил по сайтам, там везде при перезагрузке остается на месте

Добавлено через 49 минут
В итоге я пошел от обратного, и решил просто не анимацию делать, а рассчитывать последний num. Теперь num определяется в функции и сравнивается с отступом раздела, затем нужное значение подставляется в переменную

JavaScript
1
2
3
4
5
6
7
8
9
var a1 = $(".num1").offset().top;
    var a2 = $(".num2").offset().top;
    var a3 = $(".num3").offset().top;
    var a4 = $(".num4").offset().top;
    var a5 = $(".num5").offset().top;
    var a6 = $(".num6").offset().top;
    var a7 = $(".num7").offset().top;
    var a8 = $(".num8").offset().top;
    var a9 = $(".num9").offset().top;

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
function scroll(event) {
          event.preventDefault();
              if (!scrolling){
                scrolling = true;
                  var page = $(window).scrollTop();
                 if(page === a1){
                     num = 1;
                 }
                  if(page === a2){
                     num = 2;
                 }
                  if(page === a3){
                     num = 3;
                 }
                  if(page === a4){
                     num = 4;
                 }
                  if(page === a5){
                     num = 5;
                 }
                  if(page === a6){
                     num = 6;
                 }
                  if(page === a7){
                     num = 7;
                 }
                  if(page === a8){
                     num = 8;
                 }
                  if(page === a9){
                     num = 9;
                 }
                 
                if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                  num--;
                  num = num < 1 ? 1 : num;
                } else {
                  num++;
                  num = num > 9 ? 9 : num;
                }
 
                $('html, body').animate({
                  scrollTop: $(".num" + num).offset().top
                }, 800, "linear", function() {
                  scrolling = false;
                });
              }
        }

Mr_Sergo, огромное спасибо за код, взял на вооружение

Я тестил его на картинках и все ок, но как только я добавил текста и разметку в блоки.. он почему то немного "рябить" стал при скроллинге

В моем варианте скролла такой штуки нет, скорее всего это связанно с тем (я затестил), что у меня стоит проверка на переменную scrolling:
событие колесика срабатывает только при scrolling = false, а во время анимации оно true, то есть нет ряби, так как невозможна даже малейшая попытка срабатывания скролла (по сути как троттлинг выходит)

@Mr_Sergo · 22.09.2019, 08:28

Сообщение от Alex-Kir

там везде при перезагрузке остается на месте

Может как-то так -> http://some-test.onlinewebshop... ck-jquery/

HTML5
1
2
3
<div class="num"> <img src="https://pp.userapi.com/c850036/v850036046/91b6e/iVbfWvo7PCg.jpg"> </div>
<div class="num"> <img src="https://pp.userapi.com/c850036/v850036046/91b64/1oOyA25hlwM.jpg"> </div>
<div class="num"> <img src="https://pp.userapi.com/c850036/v850036046/91b5a/kf_4iXCMr9o.jpg"> </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let [num, canMove, ind, height] = [0, 0, 0, $('.num').height()];
 
const scroll = e => {
    let delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
    
    if (delta < 0 && !canMove && ind < $('.num').length-1) {
        canMove++; ind++; num += height;
        move();
    }
    if (delta > 0 && !canMove && ind > 0) {
        canMove--; ind--; num -= height;
        move();
    }
}
 
const move = () => {
    $('html, body').animate({
        scrollTop: num
    }, 800, "linear", () => {
        canMove = 0;
        history.pushState(null, null, `#${ind}`);
    });
}
 
(() => {
    let hash = +window.location.hash.replace(/#/,'');
    $('html, body').animate({
        scrollTop: hash * height
    }, 0, "linear");
    ind = hash; num = hash * height;
})();
 
$(document).bind('mousewheel', scroll );

Кроссбраузерность оставляю вам

@Alex-Kir · 22.09.2019, 20:52 **[ТС]**

Спасибо большое, все сделал, как хотелось)

Теперь немного в php завис, пошел в ту ветку

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Alex-Kir 0 / 0 / 0 Регистрация: 04.05.2014 Сообщений: 64
	21.09.2019, 21:39 [ТС]
	Вооот, вроде идеально, спасибо большое! Добавлено через 2 часа 41 минуту Правда вот у меня 9 экраном и периодически, если крутить быстро, то моментами прокручивается на несколько экраном быстро, то есть троттлинга нет (вроде троттлинг это) Не критично, но все же.. Думаю отключение скроллинга решит вопрос или нет, попробую 0

@Alex-Kir 0 / 0 / 0 Регистрация: 04.05.2014 Сообщений: 64
	22.09.2019, 20:52 [ТС]
	Спасибо большое, все сделал, как хотелось) Теперь немного в php завис, пошел в ту ветку 0

Прокрутка глючит после перезагрузки страницы

Решение