CSS interfering with JS?

[TristanP]

Hi there!

I have a page that is meant for mobile users.

On the page I have a header with bottom bar that - using JS - always shows where the visitor is on the page. Please see the attached URL, and browse the page and you will see the effect.

Now, i also tried to make a smooth app-like scrolling effect by adding the following CSS to the page:

.cs-content {
  height: 100vh;
    overflow: auto;
  scroll-snap-type: y mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}

.x-section {
     height: 100vh;
    scroll-snap-align: start;
    position: relative; 
}

This also works nicely. However, with this code, the JS stops working? It no longer highlights the appropriate section on the NAV bar. When I comment out the above CSS it starts working again??

PS please don’t share screenshots or URL on the forum.

[friech]

Hi Tristan,

Thank you for writing in, please remove the height: 100vh; you applied on the sections that will just add unnecessary height to the sections. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

Thank you for your understanding.