|
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64
|
||||||
Горизонтальный плавный scroll01.05.2019, 21:33. Показов 11562. Ответов 7
Метки нет (Все метки)
Доброго времени суток!
Реализовал scroll горизонтальный таким вот способом:
Как добавить сюда плавность в этот код? Подскажите, пожалуйста! ![]() P.S. Еще по-другому сделал, где через JS трансформируется стиль body (css), и там плавность через transition поставил. Но при таком подходе дерганья часто происходят (наверное из-за постоянной трансформации) и нельзя регулировать ширину шага прокрутки.
0
|
||||||
| 01.05.2019, 21:33 | |
|
Ответы с готовыми решениями:
7
Listbox горизонтальный scroll (.NET Compact Framework) |
|
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:
Мне же просто нужно анимировать данный скролл. Чтобы он не моментально на треть экрана переходил, а плавно. Я думал, может можно анимацию навестить как-то обычную? Просто если мы вешаем троттлинг, то все равно же плавность именно перемещения не появляется В теории, тема с Throttling может помочь при создании прокрутки через JS и body на CSS, так как можно отменить трансформацию при каждой прокрутке, и будет плавность (я не знаю, но скорее всего так это и будет, ибо лагает из-за частоты трансформации). НО через трансформацию css вроде нельзя сделать скачок на треть страницы, по крайней мере я не уверен Добавлено через 9 минут Вот на этом сайте пример плавности http://create.bang-olufsen.com/ Можно ли такую плавность добавить в мой код из первого сообщения? Добавлено через 14 минут В общем, я сделал второй вариант. Не скролл, но прокрутку ![]() Вот JS:
Но тут один единственный вопрос: почему он такой лагающий? Если кто может протестить код этот, посмотрите, как он лагает.....
0
|
|||||||||||
|
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
|||
| 02.05.2019, 16:55 | |||
|
Еще как вариант - https://developer.mozilla.org/... llIntoView Можете также воспользоваться requestAnimationFrame
0
|
|||
|
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64
|
||||||
| 02.05.2019, 17:09 [ТС] | ||||||
|
Qwerty_Wasd, Спасибо, посмотрю сейчас
Пока не забыл, вот я сделал желаемое с помощью такого кода:
Но только один после загрузки страницы, а не каждый раз, когда колесо срабатывает Добавлено через 6 минут А я понял... там же delta - это шаг, он ставит left = 1000 и все, и потом каждый раз при прокрутки он такой
0
|
||||||
|
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
||
| 02.05.2019, 17:10 | ||
|
Alex-Kir, мне лень портянку вам чиркать - простите. Предложу следующее.
Как -то делал плагин для 3Д-карусели(кстати надо не забыть отрефакторить, с учетом сегодняшних знаний ). Поизучайте код. Там наглядно продемонстрировано
1
|
||
|
0 / 0 / 0
Регистрация: 04.05.2014
Сообщений: 64
|
|
| 02.05.2019, 17:14 [ТС] | |
|
Qwerty_Wasd, окей, спасибо большое за идею о throttling
![]() Я в общем понял принцип, осталось только красиво написать все) Думаю, закрыт вопрос)
0
|
|
|
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
|
|
| 02.05.2019, 17:21 | |
|
Alex-Kir, не за что, удачи
0
|
|
| 02.05.2019, 17:21 | |
|
Помогаю со студенческими работами здесь
8
Ошибки разметки html .От чего происходит горизонтальный scroll В datagridview пропадает горизонтальный scroll, если колонке включить autosizemode = fill Как на андройде постоянно отображать горизонтальный скролл, который задан через overflow-x: scroll; ? При scroll'e не пролистываются объекты, имеющие компонент scroll rect OFF scroll на body > ON scroll children Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Отправка уведомления на почту при изменении наименования справочника
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. Данные берутся из. . .
|