Horizontal Scrolling inside native vertical

[tedc]

Is it possibile to put a div with horizontal smooth scrolling inside a vertical scrolling (native, possibly), but using the deltaY instead of deltaX property? When the div or whatever is in position 0 and the user scroll to go back to the top, the page scroll in native direction; otherwise, (if position mouse direction is down or is top but position is > 0), the user scroll inside horizontal virtual scrolling.

[baptistebriel]

Hi @tedc,

Not sure if I get what you mean. Do you want to have a horizontal scroll but while using a vertical and native scrollbar? What you need to do is just extends smooth-scrolling with these options:

const scroll = new Custom({
  native: true,
  direction: 'vertical'
})

And then, on the run function, just apply a translateX instead of translateY so the section will move from left to right while your native scrollbar will move from top to bottom.

this.dom.section.style[this.prefix] = `translate3d(${this.vars.current * -1}px,0,0)`

Be sure that you have this css applied to your body, otherwise you won't be able to scroll natively;

body {
  overflow-y: scroll;
  overflow-x: hidden;
}

The trick is to apply the max scrolling value (this.vars.bounding) as the height of this.dom.scroll (inside of the resize function). Because of that, the user can scrolls vertically because of this element going outside of the viewport bounds.

See commit #76f3dd4 for the details. Hope it helps!

[tedc]

I knew that it wasn't simple to explain, so I try again. Imagine a site split in two parts in vertical, a header and a carousel (just like build in amsterdam). The carousel starts scrolling in horizontal way when is in view (it has a height of 100vh). When the user scroll back in the carousel, if he is at position 0, he can also go back to the header of the website, otherwise, he scrolls along the carousel.

Hope it's more clear.