Bada
Bada's Coding

Bada's Coding

Section Sliding

Bada's photo
Bada
·Nov 13, 2022·

1 min read

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

|Vanilla JavaScript|

|React|

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.

 
Share this