As of jqm1.4 it seems like the native like "momentum scrolling" on iOS is no more.
Anyone know how this effect can be achieved? I feel like my app really falls short without it.
Add these two properties to the element
#your-scrollable-element {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
In Apple's list of supported CSS properties they describe the touch behavior as "Native-style scrolling. Specifying this style has the effect of creating a stacking context (like opacity, masks, and transforms)."
Related
I am developing a site where I disabled regular scrolling simply using overflow: hidden; so the user has to click through the nav to interact with each part. I was testing the mobile view on an iphone X using safari and discovered you can bypass that using two finders to scroll. Is there a CSS or JavaScript workaround to disable that function?
Use overflow: clip instead of overflow: hidden;. As explained in MDN:
Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
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 have a hybrid mobile app. Some of my pages include large area of interactive SVG images(graphs, charts). I have already added -webkit-overflow-scrolling: touch; to my content area. This helps in smooth scrolling where the SVG image is not there. But when I try to scroll on the SVG, this is not smooth at all.
Please suggest any other work around possible for this kind of problems.
.oj-hybrid-applayout-page {
-webkit-overflow-scrolling: touch;
}
You shouldn't use complex/large SVGs if you want to smooth scrolling, they really impact the performance on webview when scrolling. There is nothing you can do to fix that.
If you use images, you should also consider compressing them and not use full blown PNGs where possible.
Also welcome to SO.
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
I'm doing a mobile (responsive to be exact) version of an already existing desktop site that already has a lot of hefty hover effects on it. It often happens, than when I scroll it on mobile by touching the screen it fires some performance heavy hover actions like fading in a big box-shadow and/or animating border. I don't need that on mobile browser for obvious reasons and I've heard that just disabling hovers on scroll for mobile devices can result in a big performance gains.
Is there a way to easily, temporarily disable all hover effects for the time of scrolling on mobile devices only? Is it safe (from UX perspective) and is it worth implementing (from performance perspective)?
You could set for all of the hover effects to only occur when the body has a certain class.
Which would allow you to simply add / remove that class when you want to toggle the effects.
HTML
<body class="alloweffects">
<a>Some text</a>
</body>
CSS
.alloweffects a:hover {
color:red;
}
Then,to only prevent effects during scrolling you can simply listen to the scroll event and set the class accordingly.
Regarding performance:
I believe that the performance gain will be minimal but it'll probably vary on different browsers & devices.
But basically it should mean less event listeners, meaning more memory to deal with other things, scrolling is among them.
if we're talking about large amounts of elements I believe that the performance gain will be more significant - especially on weak devices.
You want to use pointer-events: none;
CSS:
.disable-hover {
pointer-events: none;
}
Javascript:
var body = document.body,
timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
Reference article: http://www.thecssninja.com/css/pointer-events-60fps
This deserves a little bit of testing but the issues are:
What breakpoint do you want to use for mobile (480px is usually the standard)
How to select all currently hoverable items
What effects do you need to override
Anyway a good starting point can be:
#media screen and (max-width: 480px) {
:hover > * {
// override current effects to none
}
In your responsive css, add a x:hover class for the elements, but leave it blank.
If that does not work, negate the effect.