I have an issue with scrolling. In our web project, our testers are raising issues for scrolling. They are scrolling up and down rapidly and by doing that, the text is getting blurred. Is there any fixes for this?
We are using only javascript and css. I found many plugins for jittery scroll but none of them seems to fix this problem.
Please provide a solution
Thanks and regards,
Anil Simon
You can use below css to resolve this
* {
-webkit-overflow-scrolling: touch;
}
Related
I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]
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'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 working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!
I found this awesome plugin https://github.com/inuyaksa/jquery.nicescroll that turns the scrollbar into one that is styled similar to OSX scrollbars.
Unfortunately it only works vertically. I was wondering if anyone figured out how to make this work horizontally.
You want to use that library in particular ? You can checkout iScroll javascript library
https://github.com/cubiq/iscroll