Question 316422 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Grid Makes Page Auto Scroll

I have been looking on the forums for a fix on this, and the closest thing I can find is this. But doesn’t seem to have a solution.

I have a CSS grid that’s grid-template-columns: repeat(auto-fill,minmax(70px,1fr));, whose parent element has a max-height: 350px; overflow-y: auto;. When I "select" the items in the grid, all works well ’till I scroll far enough down and select an item, it then scrolls the whole page down. Inspecting the elements, the items in the grid seem to continue to scroll to the top of the page (hidden from view of course), but once those items reach the top of the page that’s when it auto scrolls the whole page.

I tried to make a working demo on here, but it’s not replicating, not sure if that’s because it’s in an Iframe or not? Here is a link to what I am working on: https://fathomless-brook-11892.herokuapp.com/product/64e6566b3ec4190ccdecb5ba

If you inspect it, and find the "*" in the CSS and uncheck max-height: -webkit-fill-available;, and then start scrolling down and selecting a different fabric. You’ll notice the page abruptly scrolls down. Having that there seems to be the only way I can get this to work as intended. But I believe it’s the wrong way to do it?

Any help is greatly appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Not really sure why it works, but setting the "Body" to position: fixed; seemed to solve the problem. It works like max-height: -webkit-fill-available;, but now when I embed this in other places, it works as expected now.


  2. 0

    I replicated your problem, but couldn’t figure out the problem. As I see it probably a part of your script is trying to manually scroll down to that position.

    • Either you should try to debug it by checking what happens when you click that item by checking which functions are being called with onclick or onchange to see if something is changing the scroll position
    • Or if you can’t do that for some reason (maybe because of a third
      party script), you have some other dirty options to cover it. You can always scroll back to view by using scrollIntoView() maybe like element.scrollIntoView({ behavior: "instant"}) with options. Or you can save the scrollY like var scrollTop = window.scrollY; just before the click action and use it in scrollTo() like window.scrollTo(0, scrollTop); to go back to that exact position.

    Either way, this doesn’t seem like a css or browser error to me. Probably some javascript code is making this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search