Coudn't scroll to end of the page using window.scrollTo

user_4390665 0
Viewed 1221

I am not able to scroll all the way until end. Following code stop working near the end of page.

I have used following methods to scroll programmatically,

// 1 still see scrolling left
window.scrollTo(x,y) > window.scrollTo(window.scrollWidth,0)
window.scrollBy(x,y) >
// 2
scrollingElement.scrollLeft = scrollingElement.scrollWidth - document.documentElement.clientWidth;

Info:

Some width related info for my case,

window.scrollWidth > 6180
scrollingElement.scrollWidth > 6183
document.documentElement.clientWidth > 412

Note: I have used webkitColumnGap css and turned vertical page into horizontal. That's why I have bigger scrollWidth.

If I use following (full scroll) I still see, there is some scrolling left and I can use mouse to scroll that part,

window.scrollTo(window.scrollWidth,0) // go to end
scrollingElement.scrollLeft = <full width> // go to end

// log scroll position for inpection ~ this number does not match the full width
window.scrollX ~ 4k
(window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0) ~ 4k

I have run out of ideas so would need help from you guys to find out the issue.

Browser details:

I am using flutter Webview in android device.

Edit:

After lot of trial and error adding following css fixed the issue, I don't why this fixed it?

body {
  overflow: hidden !important;
}

Thanks.

webview css javascript
2 Answers

You want to scroll to the bottom? Try this: 

var height = document.body.scrollHeight
window.scroll(0, height)

Hope i understood your question correctly

user_106486550

After lot of trial and error adding following css fixed the issue, I don't why this fixed it?

body {
    overflow: hidden !important;
}

This means that some of your children elements bled out of its parent container. overflow: hidden tells the browser to cut out the parts that are not fitting inside the body container. That also means that this issue can be solved by changing the size or positioning of the body's children, and that would probably be a better approach to fixing the issue.

By default, overflow is set to visible, and therefore the browser allows you to see (and to scroll) outside of the containing box (overflow property explained)

The !important part tells the browser to artificially increase the specificity of this rule. For more details on specificity: css-tricks/sprecificity

user_78263360
Related