I want to make the same scroll function with this website(https://salanaru.jp/).
On this website, we can scroll only the right side contents. even if you try to scroll the other parts, the right side contents scroll.
I checked developper tool, but I couldn't find any code that is controlling the scroll function.
How can I find the code or fix this problem?
Use position: fixed on the left container and set a width (x).
Use padding-left: x on the right container.
body {
background-color: blue;
}
.left {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 70vw;
}
.right {
padding-left: 70vw;
}<div class="left">Fixed Content</div>
<div class="right">
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
<p>Scrolly Content</p>
</div>