Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/55: Рейтинг темы: голосов - 55, средняя оценка - 4.85
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64

Горизонтальный плавный scroll

01.05.2019, 21:33. Показов 11562. Ответов 7
Метки нет (Все метки)

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function scrollHorizontally(e) { 
  e = window.event || e;
  var delta = Math.max(-25, Math.min(25, (e.wheelDelta || -e.detail))); 
  document.documentElement.scrollLeft -= (delta * 40); 
};
 
function addMouseWell(elem, callback) { 
if (elem.addEventListener) {
  if ('onwheel' in document) {
    elem.addEventListener("wheel", callback);
  } else if ('onmousewheel' in document) {
    elem.addEventListener("mousewheel", callback);
  } else {
    elem.addEventListener("MozMousePixelScroll", callback);
  }
} else {
  elem.attachEvent("onmousewheel", callback);
}
}
 
addMouseWell(window, scrollHorizontally);
Все работает на ура, НО...
Как добавить сюда плавность в этот код? Подскажите, пожалуйста!

P.S.
Еще по-другому сделал, где через JS трансформируется стиль body (css), и там плавность через transition поставил.
Но при таком подходе дерганья часто происходят (наверное из-за постоянной трансформации) и нельзя регулировать ширину шага прокрутки.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.05.2019, 21:33
Ответы с готовыми решениями:

Горизонтальный Scroll на Static контроле
Всем здрасьте ! Я создал Static контрол в своём окне, он принимает только single line текст. Т.е. у него нету переноса строки, мне это и...

Как внедрить вертикальный и/или горизонтальный Scroll
Недавно мне понадобилось создать код, который по идее должна будет создать программа (способная извлекать и компилировать коды) так...

Listbox горизонтальный scroll (.NET Compact Framework)
Можно ли как то сделать горизонтальный скрол?

7
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
02.05.2019, 01:16
Alex-Kir, почитайте к примеру о Throttling \ Debouncing.
0
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64
02.05.2019, 15:25  [ТС]
Qwerty_Wasd, почитал интересная вещь, спасибо)
но навешивание на js, который я приводил выше не решает проблему плавности

То есть, смотрите, у меня горизонтальная прокрутка на 3000+px, с помощью того js, что я приводил выше, он скроллится горизонтально, причем я установил там значение 25:

JavaScript
1
2
3
4
5
function scrollHorizontally(e) { 
  e = window.event || e;
  var delta = Math.max(-25, Math.min(25, (e.wheelDelta || -e.detail))); 
  document.documentElement.scrollLeft -= (delta * 40); 
};
и он прокручивается тремя частями, точно до тех позиций что мне надо (одно событие колеса отправляет нас примерно на 30% влево/вправо)

Мне же просто нужно анимировать данный скролл. Чтобы он не моментально на треть экрана переходил, а плавно. Я думал, может можно анимацию навестить как-то обычную?

Просто если мы вешаем троттлинг, то все равно же плавность именно перемещения не появляется


В теории, тема с Throttling может помочь при создании прокрутки через JS и body на CSS, так как можно отменить трансформацию при каждой прокрутке, и будет плавность (я не знаю, но скорее всего так это и будет, ибо лагает из-за частоты трансформации).

НО через трансформацию css вроде нельзя сделать скачок на треть страницы, по крайней мере я не уверен

Добавлено через 9 минут
Вот на этом сайте пример плавности
http://create.bang-olufsen.com/

Можно ли такую плавность добавить в мой код из первого сообщения?

Добавлено через 14 минут
В общем, я сделал второй вариант. Не скролл, но прокрутку

Вот JS:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let ml = 0;
        window.addEventListener('wheel', function (e) {
            if (scroll) {
                var content = document.querySelector('body');
                var speed = 1000;
                if (e.deltaY < 0) {
                    // 'scroll up'
                    content.style.transform = `translate(-${ml}px,0)`;
                    ml -= speed
                }
                if (e.deltaY > 0) {
                    // 'scroll down'
                    content.style.transform = `translate(-${ml}px,0)`;
                    ml += speed
                }
            }
        });
Добавляем body transition: transform .5s; и все двигается плавно

Но тут один единственный вопрос: почему он такой лагающий?
Если кто может протестить код этот, посмотрите, как он лагает.....
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
02.05.2019, 16:55
Цитата Сообщение от Alex-Kir Посмотреть сообщение
Но тут один единственный вопрос: почему он такой лагающий?
потому что срабатывает каждый тик колеса.
Цитата Сообщение от Alex-Kir Посмотреть сообщение
Вот на этом сайте пример плавности
throttling и transition

Еще как вариант - https://developer.mozilla.org/... llIntoView

Можете также воспользоваться requestAnimationFrame
0
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64
02.05.2019, 17:09  [ТС]
Qwerty_Wasd, Спасибо, посмотрю сейчас

Пока не забыл, вот я сделал желаемое с помощью такого кода:

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
function scrollHorizontally(e) { //включает горизонтальный скрол элемента колесом
  e = window.event || e;
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //это шаг колеса для разных браузеров
  //document.documentElement.scrollLeft -= (delta * 1000); //прокручиваем всю страницу
  var sk = (delta * 1000);
  $(".slider-homepage").animate({
    'left': sk
  },1000);
  e.preventDefault();
};
 
function addMouseWell(elem, callback) { //вешает кроссплатформенный обработчик на колесо мыши над элементом
if (elem.addEventListener) {
  if ('onwheel' in document) {
    elem.addEventListener("wheel", callback);
  } else if ('onmousewheel' in document) {
    elem.addEventListener("mousewheel", callback);
  } else {
    elem.addEventListener("MozMousePixelScroll", callback);
  }
} else {
  elem.attachEvent("onmousewheel", callback);
}
}
 
addMouseWell(window, scrollHorizontally);
На body стоит overflow:hidden, так что двигается только slider и красиво плавно, как надо

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

Добавлено через 6 минут
А я понял... там же delta - это шаг, он ставит left = 1000 и все, и потом каждый раз при прокрутки он такой
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
02.05.2019, 17:10
Alex-Kir, мне лень портянку вам чиркать - простите. Предложу следующее.
Как -то делал плагин для 3Д-карусели(кстати надо не забыть отрефакторить, с учетом сегодняшних знаний ). Поизучайте код. Там наглядно продемонстрировано
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
throttling и transition
. Ну и в принципе можете пользоваться. Вдруг у Вас клиент "эстет" попадется. Первая же пена в профиле - https://codepen.io/qwerty_wasd/
1
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64
02.05.2019, 17:14  [ТС]
Qwerty_Wasd, окей, спасибо большое за идею о throttling
Я в общем понял принцип, осталось только красиво написать все)
Думаю, закрыт вопрос)
0
Эксперт JSЭксперт HTML/CSS
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
02.05.2019, 17:21
Alex-Kir, не за что, удачи
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
02.05.2019, 17:21
Помогаю со студенческими работами здесь

Ошибки разметки html .От чего происходит горизонтальный scroll
Сайт tender-dalan.ru, в пункте меню http://tender-dalan.ru/obuchenie-torgam/ есть горизонтальный скролл , не понятно что его образовывает...

В datagridview пропадает горизонтальный scroll, если колонке включить autosizemode = fill
Добрый день! Мне нужно, чтобы колонка в datagridview растягивалась по всей ширине таблицы. Поэтому ставлю autosizemode = fill. Однако...

Как на андройде постоянно отображать горизонтальный скролл, который задан через overflow-x: scroll; ?
Ну и до кучи как на Aple? У меня мобильники эти сроллы скрывают.

При scroll'e не пролистываются объекты, имеющие компонент scroll rect
Есть главная панель со scroll rect'ом для горизонтального scroll'а и event trigger'ом (для проверки пролистывания) с дочерними объектами,...

OFF scroll на body > ON scroll children
Добрый день. Возник вопрос как сделать так чтоб при на ведении на элемент событие scroll работало в этом элементе, и не срабатывало на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Отправка уведомления на почту при изменении наименования справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода!
anaschu 24.03.2026
Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
Контроль уникальности заводского номера - вариант №2
Maks 24.03.2026
В отличие от предыдущего варианта добавлено прерывание циклов, также добавлены новые переменные для сохранения контекста ошибки перед прерыванием цикла: Процедура ПередЗаписью(Отказ, РежимЗаписи,. . .
SDL3 для Desktop (MinGW): Вывод текста со шрифтом TTF с помощью библиотеки SDL3_ttf на Си и C++
8Observer8 24.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-text-sdl3-c. zip finish-text-sdl3-cpp. zip
Жизнь в неопределённости
kumehtar 23.03.2026
Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .
Модель здравоСохранения: работники работают быстрее после её введения.
anaschu 23.03.2026
geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .
Контроль уникальности заводского номера - вариант №1
Maks 23.03.2026
Алгоритм контроля уникальности заводского (или серийного) номера на примере нетипового документа выдачи шин для спецтехники с табличной частью, разработанного в конфигурации КА2. Данные берутся из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru