We are encountering difficulties in implementing momentum-based scrolling on iOS Safari for the root <html> element.
The following CSS snippet yields the desired outcome:
html {
height: 100%;
overflow-y: scroll;
}
body {
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
However, this causes the scrollbar to completely disappear.
We have tried the following approach to restore the scrollbar without success:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Furthermore, setting the body height using calc(100% + 1px) did not resolve the issue.
Even when half-way down the page, the JS snippet below outputs '0' as the scroll value:
const y = document.body.scrollTop ||
document.documentElement.scrollTop ||
document.scrollingElement.scrollTop;
console.log(y);
We acknowledge the buggy nature of momentum-based scrolling on iOS Safari.
- Has anyone successfully enabled scrolling for the root
<html>element? - Any suggestions on retrieving the scroll value
document.body.scrollTop?
We are currently not considering the use of external libraries. Thank you.