Overflow hidden issue with transformation

Design help Animations & Interactions
1

Hi,

I have added a scale animation on my hero image on my landing page, and despite having overflow set as hidden on the parent div - it still creates a horizontal scroll.

The issue is fixed if i add the overflow hidden setting to the body - however I have a sticky container further down the page and this then gets broken.

Would you have any solution on how to remove the horizontal scroll?

Here is the link to my website.

The overflow issue doesn’t actually show up in Webflow’s preview but does show on the live site - https://champions-journal.webflow.io/

Thank you

2

Looks like the horizontal scroll is caused by Cover Overview section and not by the
hero image.
Give the Cover Overview section a 100VW width and this should solve it.

3

This is not the way to do it. 100vw will actually create horizontal scroll since vw’s won’t take scroll width into account when determining page width. You got to use 100% to take into account scroll width.

1 Like
4

Thanks both for your help.

changing the width didn’t work however found a way to fix it by changing the font size so it wouldn’t overflow.

1 Like
5

Great! There is one other issue with your page though - the auto-scroll to the registration section happens so late that at that point users will already be past that section most likely, which will result in the scroll UP. This happened twice for me and I was puzzled trying to figure out what that was :smiley:

6

Yes we’re currently trying to add code to detect that if the user has already scrolled past it would disable the scroll but having a few issues with that at the moment.

1 Like
7

Yes, good idea! If you ever manage to make it work please post the solution here, I personally can benefit from this as my own site have the same issue, haha

8

Hi Dram,

This is the code i have for the automatic scroll, and with the added code to ensure that the scrolling doesn’t occur when the user has already scrolled past the section.

<script>
	$(document).ready(function(){
  	setTimeout( function() {
    	if( $(document).scrollTop() <= $('#landing-about').offset().top) {
        $('html, body').animate({
          scrollTop: $('#landing-about').offset().top
        }, 1000);
      };
    }, 4600);
  });
</script>

I hope this can help you with your website.

Thank you,
Julie

1 Like
9

See, this is the beauty of webflow community. I came to try to help and went away with a fix to my own problem I long forgot about!

Thank you, Julie!