How to implement horizontal movement with vertical scrolling?

Question

css

How to implement horizontal movement with vertical scrolling, so that the movement would occur in a straight line and in one block, and not occur throughout the page?

Answer 1

Read here I
also advise you to read about scrollleft
Here is another option
https://github.com/kasparsj/jquery-data-parallax here is a ready-made example, but it lags, it seems to me.

Answer 2

https://css-tricks.com/snippets/jquery/horz-scroll...

Answer 3

If I understand correctly, then in principle, you can screw it here, the solution that I gave to a similar question . Only replace scrollTop with scrollLeft Sandbox
example
UPD jsfiddle.net/27mz45L2/1

var elH = horizontal.offsetHeight,
    elTop = horizontal.offsetTop,
    winH = window.innerHeight,
    factor = horizontal.scrollWidth / (elH * 2 + winH);
window.addEventListener('scroll', function (e) {
    var elPosTop = horizontal.getBoundingClientRect().top + elH,
        elPosBot = horizontal.getBoundingClientRect().bottom - elH;
    if ((elPosTop >= 0) && (elPosBot <= winH)) {
        var dE = document.documentElement,
            top = (this.pageYOffset || dE.scrollTop) - (dE.clientTop || 0);
        horizontal.scrollLeft = Math.abs(elTop - winH - top) * factor;
    }
}, false);