I've been trying to achieve this effect of default horizontal scrolling when reaching element's view. I still could not find some decent way to implement it correctly, for now I was only able to achieve it with pure CSS (the problem is - it doesn't scrolled horizontal correctly, I need to click on the element so it will be aware I'm in the right view. This is my code for now -
::-webkit-scrollbar {
width: 1px;
height: 1px;
}
::-webkit-scrollbar-button {
width: 1px;
height: 1px;
}
.test {
position: absolute;
display: block;
top: 0;
left: 0;
width: calc(250px + 1px);
max-height: 750px;
margin: 0;
padding-top: 1px;
background: #abc;
overflow-y: auto;
overflow-x: hidden;
transform: rotate(-90deg) translateY(-250px);
transform-origin: right top;
padding: 250px 0 0 0;
}
.test div {
display: block;
padding: 5px;
background: #cab;
transform: rotate(90deg);
transform-origin: right top;
width: 250px;
height: 250px;
margin: 10px 0;
}<div class="test">
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</div>I'd love to know if there is any way to make the scrolling automatically start horizontally as I reach the view, and if that's not possible I'd love to know how would you implement it with JS in React. Thank you!
I'm a little confused about the wording of this question - by "default horizontal scrolling", do you mean as the user scrolls down it scrolls horizontally instead?
If that's the case you'll probably want to set up an event handler to detect scroll, and have it call window.scrollBy()
window.addEventListener('scroll', handleScroll);
handleScroll(e){
window.ScrollBy(e.deltaY, 0);
}