<p>Please scroll in the below examples and check the section sliding.</p>
<p>|Vanilla JavaScript|</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/qBKmLYJ">https://codepen.io/bada3670/pen/qBKmLYJ</a></div>
<p>|React|</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codesandbox.io/s/section-sliding-c96eno">https://codesandbox.io/s/section-sliding-c96eno</a></div>
<p>I used Intersection Observer API.</p>
<p>These are what I think important.</p>
<ul>
<li><p>'body' should be 'overflow-x: hidden;'. If not, the width will be very long in another section because of the sliding section.</p>
</li>
<li><p>If the sliding section doesn't move back although you scroll up, the reason may be it is still on the viewport. The intersection can be so small that we can't notice it.</p>
</li>
<li><p>In some cases, translate '100%' works while it doesn't work in other cases.</p>
</li>
</ul>


Please scroll in the below examples and check the section sliding.

|Vanilla JavaScript|

%[https://codepen.io/bada3670/pen/qBKmLYJ]

|React|

%[https://codesandbox.io/s/section-sliding-c96eno]

I used Intersection Observer API.

These are what I think important.

- 'body' should be 'overflow-x: hidden;'. If not, the width will be very long in another section because of the sliding section.

- If the sliding section doesn't move back although you scroll up, the reason may be it is still on the viewport. The intersection can be so small that we can't notice it.

- In some cases, translate '100%' works while it doesn't work in other cases.

examplist

examplist

Section Sliding