Как реализовать горизонтальный скролл одного блока?
Подскажите как реализовать такой скролл? Как реализовать такую анимацию как на сайте https://k24moscow.ru/en/location/ вот этого блока Может есть библиотеки такие? scrollmagic подключать не хочу т.к. анимация нужна только для одного блока
Отслеживать
задан 18 фев 2022 в 10:04
33 5 5 бронзовых знаков
Понял о чем вы. Вопрос для меня был не понятен. Свой ответ удалю
18 фев 2022 в 10:20
Сделано очень просто, после события прокрутки колеса, мы просто меняем transform: translateX(%); Тут не нужны левые библиотеки, клава js и css.
18 фев 2022 в 10:23
Изменил ответ))
18 фев 2022 в 11:08
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
let element = document.getElementById("scroll"); let cnt = 0 document.addEventListener('wheel', function(event) < event = event || window.event; var y = event.deltaY || event.detail || event.wheelDelta,val=0.1,min = 0,max=0; if(y >0) < cnt = cnt - 20; element.style.transform = 'translate(' + cnt + '%)' >if(y < 0)< cnt = cnt + 20; element.style.transform = 'translate(' + cnt + '%)' >>);#scroll
Что-то типа такого. На коленках
Отслеживать
ответ дан 18 фев 2022 в 10:13
1,832 1 1 золотой знак 3 3 серебряных знака 19 19 бронзовых знаков
Единственное это понятно, что требуется доп блок который даст скролить только внутри него, те не задевая основной скролл браузера
18 фев 2022 в 11:09
Спасибо, дальше думаю сам сделаю
18 фев 2022 в 11:43
- javascript
- jquery
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
overflow-x
Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.
Синтаксис
overflow-x: auto | hidden | scroll | visible
Значения
visible Отображается все содержание элемента, даже за пределами установленной ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляется горизонтальная полоса прокрутки. auto В зависимости от браузера, в основном, горизонтальная полоса прокрутки добавляется только при необходимости.
HTML5 CSS 2.1 CSS3 IE Cr Op Sa Fx
overflow-x Duis te feugifacilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-x
Объектная модель
[window.]document.getElementById(» elementID «).style.overflowX
Как создать горизонтально прокручиваемые контейнеры
Контейнеры с горизонтальной прокруткой становятся все более популярными. Особенно среди мобильно оптимизированных сайтов, где они используются для уменьшения высоты веб-страниц.
После реализации нескольких таких элементов я захотел выяснить, как с помощью минимального объема кода создать горизонтальную прокрутку, которая корректно работает, на всех типах пользовательских устройств.
Сначала создадим контейнер и дочерние div внутри него, которые будут прокручиваться по горизонтали.
Card
Card
Card
Card
Card
Card
Card
Card
Card
