Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript scrollTo method does nothing?

So I am desperatley trying to get some scrolling functionality to work on a page. After not having a luck I decide to just stick window.scrollTo(0, 800); on my page to see if I could get any scrolling to happen. Nothing does happen. I have an accordion that expands and then I want to scroll to a specific element with in it. But for now I would be happy to just see the thing scroll at all. Anyone run into this?

Thanks!

like image 883
Nick Avatar asked Jul 23 '09 22:07

Nick


People also ask

Why is scrollTop not working?

If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

Why window scroll is not working?

Switch to the Touchpad tab (or Device settings if the tab is absent) and click on the Settings button. This will open the Properties window. Expand the MultiFinger Gestures section, then make sure the box next to Two-Finger Scrolling is checked. If the box is empty, simply click on it to enable it.

How do I scroll up in JavaScript?

Method 1: Using window.scrollTo() The scrollTo() method of the window Interface can be used to scroll to a specified location on the page. It accepts 2 parameters the x and y coordinate of the page to scroll to. Passing both the parameters as 0 will scroll the page to the topmost and leftmost point.

How do I use scrollTo in Windows react?

scrollTo only works when the scroll behavior is set on html . If you have set overflow: scroll on some container inside of the DOM, then that need to be accessed. Assign an id to that. For example I have below div container for which I have set overflow: scroll .


1 Answers

If you have something like this:

html, body { height: 100%; overflow:auto; } 

If both body and html have a height definition of 100% and also scrolling enabled, window.scrollTo (and all derived scrolling mechanisms) do not work, despite a scrollbar being displayed (which can be used by the user), when the contents exceed that 100% body height. This is because the scrollbar you see is not that of the window, but that of the body.

Solution:

html { height: 100%; overflow:auto; } body { height: 100%; } 
like image 132
frevd Avatar answered Oct 01 '22 01:10

frevd