Disable vertical bounce effect in an ipad web app
I know this may not be the best way but it works.
Here is what I did -
#scrollableDiv {
position:fixed;
top:50px;
width:300px;
height:500px;
word-wrap: break-word;
overflow-y: scroll;
}
document.getElementById("scrollableDiv").innerHTML = longText;
document.getElementById("scrollableDiv").scrollTop = 0;
ipad safari: disable scrolling, and bounce effect?
This answer is no longer applicable, unless you are developing for a very old iOS device... Please see other solutions
2011 answer: For a web/html app running inside iOS Safari you want something like
document.ontouchmove = function(event){
event.preventDefault();
}
For iOS 5 you may want to take the following into account: document.ontouchmove and scrolling on iOS 5
Update September 2014:
A more thorough approach can be found here: https://github.com/luster-io/prevent-overscroll. For that and a whole lot of useful webapp advice, see http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
Update March 2016: That last link is no longer active - see https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html for the archived version instead. Thanks @falsarella for pointing that out.
CSS: Disable bounce effect for scroll on iOS 13
Polyfilling this CSS property in Safari is pretty tricky.
For non-scrollable elements, you can prevent scroll chaining by simply turning off touch gestures. You can do that with a CSS property that is supported by Safari: touch-action: none.
But for scrollable elements, JavaScript will be required.
Remember that scroll chaining occurs when you reach the bounds of the element. So we need to ensure that the user is never able to fully scroll to the top or bottom. Doing this the wrong way can cause UX problems, because the user will clearly be fighting against the default inertia scroll.
So here's the trick:
Create an inner element that is at least 3px taller than the size of its scrolling parent, to force the area to get the overscroll behavior.
Immediately set the scroll position to 1px to prevent scroll chaining when scrolling up
With JavaScript, catch when the scroll position is exactly 0 or exactly at the bottom. After a requestAnimationFrame, set the scroll position to 1px from either the top or bottom.
The container will still get the inertia scroll (the user won't have to fight it) but it won't trigger scroll chaining.
Here's the JavaScript function:
this.addEventListener('scroll', async handleScroll() {
await new Promise(resolve => window.requestAnimationFrame(resolve))
const {
scrollTop,
scrollLeft,
scrollHeight,
clientHeight
} = this
const atTop = scrollTop === 0
const beforeTop = 1
const atBottom = scrollTop === scrollHeight - clientHeight
const beforeBottom = scrollHeight - clientHeight - 1
if (atTop) {
this.scrollTo(scrollLeft, beforeTop)
} else if (atBottom) {
this.scrollTo(scrollLeft, beforeBottom)
}
}
source: https://dev.to/mpuckett/the-holy-grail-web-app-shell-with-header-and-footer-for-iphone-549j
Disable elastic scrolling in Safari
You can achieve this more universally by applying the following CSS:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
This allows your content, whatever it is, to become scrollable within body
, but be aware that the scrolling context where scroll
event is fired is now document.body
, not window
.
Related Topics
Screen Zooms in When a Bootstrap Modal Is Opened on iOS 9 Safari
Javascript: How to Determine How Much User Scrolls After Reaching the End of a Page
How to Get the CSS Left-Property Value of a Div Using JavaScript
How to Set a Single Value of Transform While Leaving the Other Values
Mui Button Hover Background Color and Text Color
Impossible to Edit Styles in Chrome
Uncaught Syntaxerror: Unexpected Token Illegal
Find Next Cell Contained in Sibling Row with Queryselector
Onclick JavaScript Function Working Only on Second Click
Auto Tab to Next Input Field When Fill 4 Characters
Webkit Transitionend Event Grouping
Detect If Visitor Is on Index Page with Client Side Scripting
Make Overlapping Div "Not Clickable" So That Content Below Can Be Accessed
How to Open Blob Url on Chrome iOS
Position Sticky: Scrollable, When Longer Than Viewport
CSS Overflow Hidden Increases Height of Container
How to Measure the Space That a Text Will Take in JavaScript