Как сделать горизонтальную прокрутку элемента?

Question

[AlexVPdev]

суть такая.
на длинном лендинге в середине есть очень большая по width картинка(размер точный не известен), хотелось бы чтобы когда доскроливаешь до нее, она начинала скролиться в бок. после того как доходишь до правого края картинки продолжается скролиться вниз как и всегда(соответственно если вверх скролишь то картинка уходит в право).
пробовал через - position: fixed; блок, получилось реализовать только первую часть(когда скролишь вниз до картинки).
сравниваю offsetTop своего блока и проскроленное растояние.
а вот потом оставить ее и продолжить скролить вверх не выходит.
Помогите пожалуйста

Comments

[Сергей delphinpro]

зачем fixed?
слушайте onWheel, блокируйте его, если блок с картинкой в поле зрения и его offsetLeft меньше чем (outerWidth-scrollWidth). При блокировке смотрите направление прокрутки и меняйте scrollLeft блока с картинкой.
Всё.

[Сергей delphinpro]

при блокировке учитывайте направление прокрутки, чтобы в обратном направлении корректно работало

[AlexVPdev]

Сергей delphinpro, так вот fixed и блокировал. другого не нашел в инетах... (хотелось бы чтоб не только колесико работало но и стралки клавы и сам скролбар в браузере) а как еще можно заблокировать?

[Сергей delphinpro]

хотелки странные на мой взгляд, но если вам хочется, то ок.
Блокировать вызовом event.preventDefault();

Answer 1

[Павел Волынцев]

https://css-tricks.com/pure-css-horizontal-scrolling/
Повернуть блоки на 90 градусов и разрешить скролл :)

Comments

[AlexVPdev]

данное решение как я понимаю подходит когда у тебя несколько блоков нужно скролить. у меня один с широкой картинкой. по этому не выходит чтото