I'm trying to create a "single-page" web-app, in the same style as Gmail, Google Docs, Evernote, etc. where it doesn't make sense to allow inertia scroll to yank at the page.
Here is a video of the effect I'm trying to disable:
http://tinypic.com/r/2eb6fc5/8
How can we accomplish this? There are solutions listed in Disable elastic scrolling in Safari but they are old, don't work on OSX Chrome, while Gmail/Google Docs/Evernote clearly have a solution that works on all OSX browsers.
Update May/2020
There are an array of considerations when disabling inertia scroll, with respect to browser compatibility. Here is a repo which attempts to abstract away those compatibility problems: https://github.com/willmcpo/body-scroll-lock
This repo attempts to reconcile drawbacks in both older solutions listed below:
Update Jan/2019
There's a simpler CSS solution:
body {
overflow: hidden;
}
Original Answer:
I found a perfect solution - override the scroll events.
$body.addEventListener("mousewheel", function(e){ e.preventDefault(); });
Turns out that inertia scroll is really just an extension of normal scrolling, where a special mouse driver emits scroll events in such a way as to emulate the inertia effect. So overriding scroll events inherently prevents inertia scroll.
See this link for examples with cross-platform compatibility.
This works on MacOS and iOS:
overscroll-behavior-y: none;
You're just using the wrong keywords. I found this:
document.body.addEventListener('touchmove',function(e){
e.preventDefault();});
But this is not a proper solution. It's better to wrap your content in some div, and use css property on it:
-webkit-overflow-scrolling: touch;
Here are some helpful links on "bouncing"
here
and here
Related
I'm not sure if this question needs code but I will try to explain as well as possible.
I have a simple menu button that opens a full page overlay (w/ opacity 0.9)
so I want to be sure the use doesn't scroll the content in the page while the menu is open.
I implemented few techniques (body: overflow hidden, position fixed) but I realized that when you open the website on my iPhone Safari, the rules work only when the viewport has the browser interface fully visible (not the minimal ui on the right) but when in minimal Uimode, then the scroll can happen.
also since my design wants to be semi-transparent, the user can clearly see what's happening below..
any solutions?
It seems the best solution I found so far is to use
touch-action: none;
-ms-touch-action: none;
on the modal div. Not sure why but if apply the rule to the body doesn't work.
Of course this may prevent the modal to be scrollable...haven't tested yet, but at least is one less headache for today.
I'm working on my personal website. There's this weird problem that on my iOS device (I don't have any other mobile devices to test this on) scrolling seems bugged. It's not smooth, and it immediately stops when you lift your finger off the screen.
As I have no clue where the problem might be, I'll not post the entire code of my website. It is live at nielshak.com.
Things I tried: removing all JS from my website (to exclude any JS is tampering with scroll behaviour), removing all :hover css selectors (to exclude that any hover elements might tamper with scrolling) and adding -webkit-overflow-scrolling: touch to the css.
I'm at a total loss here. I really appreciate all help!
Edit: I still have no insights on this. Is there anyone out there with further suggestions?
Did you try -webkit-overflow-scrolling?. Add -webkit-overflow-scrolling: touch; to page-wrapper.
I've created a virtual-rendering implementation (similar to what you would find in the project SlickGrid). Everything seems to be working very well, with one problem: On Mac, smooth scrolling (the rubber-banding and fade-to-stop) doesn't work on my element when I add overflow: auto??
http://syntaqx.com/infiniload/
Any help would be appreciated.
You can use JS Librarys:
https://github.com/ftlabs/ftscroller
FTScroller is a cross-browser Javascript/CSS library to allow touch,
mouse or scrollwheel scrolling within specified elements, with
pagination, snapping and bouncing support.
I am using jQuery jScrollPane plugin in my website, It is working fine in normal PC browsers and iPad, Android tablets..
But when I open my website on Windows 8 touch screen Laptop I am unable to scroll the page with touch gestures like in iPad or Android tablet.
I tried this demo website(http://jscrollpane.kelvinluck.com/themes/lozenge/) also, I am unable to scroll the content with touch gestures.
To scroll the page I have to go to scrollbar and drag it to left/right. Earlier with default scroll bar I am able to scroll the page with touch gestures now I can't with jScrollPane.
I am able to scroll the content(demo and my site, in windows8 Device) in Chrome but not in IE and FireFox
Is this a known Issue? How can I fix this?
Is jScrollPane supports only webkit browsers for touch gestures?
If yes How can we make it to work on all browsers especially Firefox and IE?
Update:
As I mentioned in comment for Bruno answer, We already tried using following styles to that division.. But no luck
.scroll-pane{
overflow-x:scroll;
-ms-touch-action: pan-x;
}
and
.scroll-pane{
overflow-x: scroll;
-ms-scroll-snap-type: mandatory;
-ms-scroll-snap-points-x: snapInterval(0%, 100%);
}
Add this styles to the body tag of CSS.
overflow-x:scroll ;
-ms-touch-action: pan-x;
It worked for me. Hope this helps you as well. Best of Luck.
Yes, jScollPane only cares for webkit touch events (They were the only events atm) but now MS introduced the Pointer events that while are fairly easy to detect many devs don't do this. One other example that comes to mind is the FlexSlider plugin, that also used to only detect touchend, touchstart, etc.
If you want to make jScollPane work in Win8 you might want to modify the source and adapt it to detect MS Pointer events.
I add a MsPointerEvents (http://goo.gl/MnEIh) to a jquery.jscrollpane.js:
https://raw.github.com/karacas/jScrollPane/9fe8872f6e2438a87847e3d01b46648f06d15fc1/script/jquery.jscrollpane.js
Hope it works, sorry, but i can't tested this, because i don't have w8.
I have a div that is overflow-y: hidden; overflow-x: auto; and rendering a scrollbar exactly the way I want. I have all of the scrolling functionality and everything I want perfect already. Now, all I want to do is replace the default browser scrollbar with a custom one.
It needs to work in PC IE7+ and Firefox and Mac Safari so it'll need to be JavaScript or jQuery. I've already tried four different plugins that I've found, but none of them worked either because of the version of jQuery (1.6.2), didn't work in all the browsers necessary, or wouldn't work for a horizontal scrollbar, etc. The ones I tried were jQuery UI's slider, jQuery Custom Scrollbar, Tiny Scrollbar and jScrollPane.
I'm hoping there's a simple plugin out there, but I can't seem to find it.
I've used Flexcroll several times and it works great. Good browser support and it handles touch events for mobile devices as well.
The appearance of the scrollbars is handled with a sprite that's pretty easy to customize. It's 17.5KB which comes out to about 8KB when it's compressed so it's nice not having the overhead of a whole library when this is all you want.
http://www.hesido.com/web.php?page=customscrollbar