Can anyone please tell me how they accomplished disabling the "bounce" effect in safari on the iPhone without disabling scrolling completely? I've googled the crap out of this and i can't find a working solution.
i've tried the following:
<script>
function BlockMove(event) { event.preventDefault();}
</script>
-> this just completely disables scrolling
i've also tried scrollFix.js, and i don't want to resort to using iScroll4 or any bloated JS library. I'm stubborn but there has to be a reliable easy way to fix this right?
The only thing I can think of is you need to detect when to stop the bounce, so when you want to stop the bounce then disable scrolling.
For example - I am moving my finger down which actually moving the page content up, you need to detect if the page ha reached the top, if so then disable scrolling. When you detect the touch is moving up which means the content is moving down then enable scrolling again unless you hit the bottom of the page.
I am assuming this is the bounce effect you are talking about. It's default behavior I don't think you need to get rid of it, unless your client wants it and will not change his/her mind
Related
I am interested in hearing from anyone who has experienced this problem in the past or has any idea what the cause might be.
I am using the FullCalendar V3 library and when I click on the more events pop over the scrollbar does not work and I cannot scroll down to see all of the events.
The scroll bar does not work on Google Chrome Version 87.0.4280.141 however I have checked it on Firefox 84.0.2 and it scrolls ok on that browser.
I have not changed any of the library code and I have the impression it is some JavaScript that is the cause but would not know where to start.
Thank you in advance for any ideas.
Below is the popover in question:
This is caused due to a chrome smooth scrolling issue. Assuming you have no control over the browser side and therefor cannot disable that feature. Applying this to the scrolling container inside the popup should fix the issue.
pointer-events: auto !important
Note the selector I used was.
.fc-more-popover .fc-body.fc-widget-content .fc-event-container
I've been researching how to prevent Safari's feature of swiping at the edge of the screen to navigate to previous/next pages in browser history. I have an application that uses Hammer.js to pan an image, and on mobile the image takes up the whole screen. So if the user happens to start panning at the left edge of the image, for example, it forgoes that by ignoring my little javascript app and instead going to the previous page. I haven't found anything saying it is actually possible to prevent this edge swipe feature...though I did find this: https://gist.github.com/mountainstorm/9430618. However, all it seemed to accomplish for me was breaking mouse scroll functionality.
Any help would be greatly appreciated. Thanks!
I don't think it can be done since it is an OS level feature. As long as the swipes initiate inside the web page, there should not be any issue. If you have sufficient margin from the edge, then it should not be a problem.
This isn't a specific JS code issue, but more the way iOS deals with JS that is causing more problems on my site than most others.
On iOS only (it doesn't happen on Android) if I'm natively scrolling (up/down) and then try to activate some JS just before the scroll has finished (very quickly) then it completely ignores the JS.
I believe that Apple do this so that the UX always remains priority (don't let any crappy JS slow down the user), but in this case it's just a very simple piece of JS that I want to allow to run.
As an example, if a user is scrolling and then quickly presses a tab at the top of the screen that opens a fixed navigation panel then it won't register if the native scroll is still happening. If they press it again (the scroll has finished) then it works.
I'm also using a JS slider to scroll horizontally through images and if I try to scroll left/right just before the native up/down scroll has finished it sort of jumps and isn't good UX. I think it's prioritising the native scroll but still activating the horizontal scroll with some sort of delay.
It's not a massive problem, but not perfect. If everybody slowly navigated the site and waited for the native scroll to come to a complete stop, it would be great. But of course people won't do this.
I don't think preventing the default behaviour will do anything. I have tried to take over the native scroll before on iOS and I just don't think you can.
I think this may actually happen on many sites. I've just tried to find a good example by visiting stackoverflow.com on an iPhone and if you scroll quickly and then quickly hit a link before the scroll has finished it won't register. I don't think text links are as big a UX issue though, but a horizontal slider and big 'open menu' button at the top are much more likely to be hit quickly before the native scroll has ended (as you don't need to read something before you press it, like with text links).
I have various JS scripts on a site that would benefit from this being improved in iOS, so if I can understand a way around it, why it happens, what is going on, then I can apply individual fixes to each of those scripts.
Thanks.
The problem is not that iOS ignores javascript while scrolling (more precisely, while the scroll momentum is active). The problem is that, while that happens, iOS does not really register the position change of elements on the screen. In fact, if you have a handler attached to the scroll event, it will stop firing the moment you stop touching the screen, and then will fire just once when the scrolling stops.
Consequence? You think you're touching a link, but you aren't. The image on the screen has moved up or down, but, to the broswer, everything is on the same position, so, actually, you aren't touching anything (or are touching something different). I got very annoyed when I found this behaviour because, in my case, my page is full of images that are links to a gallery ... and if you touch them while scrolling, the gallery opens showing you not the image you touched, but another (The one that really was on that position when your fingers stopped touching the screen).
Is there a workaround? The only one that I know of is disabling the scroll momentum, but you lose scrolling performance.
Is there any way we could disable the browser scrollbar itself?
I'm not sure if this is a stupid question, but I really hope there are any alternative ideas you can suggest.
I am creating a Site following a Parallax effect with timeout. I want users to disable scrolling the browser so that it wont make the presentation screen get behind/advance, making its flow distorted.
I have already found a way to disable scrolling using mouse wheel and key strokes (thanks and Credits to this --> How to disable scrolling temporarily?) but users can change the view by clicking on the browser scrollbar itself
$('body').css("overflow", "hidden");
Should do the trick. Or add it via your stylesheet.
The last days I'm working on a webapp for tablets, pc's, phones etc.. I have noticed that the user experience of this app is greatly improved in some cases by disabling the elastic effect of for example the iPad.
(Elastic effect meaning; when you touch the page on a plane that does
nothing, it will follow your finger and move the complete webpage,
even beyond de borders of the screen and on release launch it back to
the original position.)
Anyway! I have a little javascript code which does the trick, and I have been able to adapt it so most touch sensitive part do still work, whilst the page they are on is 'un'-touchable.
This is the piece of code: $(document).bind('touchmove', false);
Is there an easy way to apply this to the whole page, but make an exception for a div? I have tried some stuff but I'm not getting anywhere. Any help is appreciated! :D
Thanks!
I'm not sure whether this will work but its worth a shot. You select all elements on the page, then you remove your div from the list and bind the event to all these elements.
$('*').not('#yourdivId').bind('touchmove', false);