I'm using iScroll for mobile-friendly scrolling, and have an odd issue. Not only am I using iScroll for the main portion of a site, but I'm also using it for popups. However, scrolling within the popup also triggers scrolling in the main site underneath.
Is there a way to prevent this kind of bubbling?
Are you asking for event.stopPropagation() (a native JS method that keeps the event from bubbling any further up into the DOM)?
Prevents further propagation of the current event.
https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
Could you edit your question to include some code in order to give a little more context? Thx
Related
Is there way to interrupt iOS scrolling using javascript?
Example 1: user is scrolling content by moving his finger through device screen. When some event happens user continue moving his finger without raising but there is no scrolling anymore.
Example 2: user initiated scrolling but stopped his finger without raising. Some event happens and scrollbar disappears.
Example 3: Momentum scrolling completely stops when some event happens.
The first case could probably be covered using the following piece of code from another question
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
However, it will only work on iOS 8+. As for the other two cases I'm not aware of any method to do that.
If you're talking about interrupting the iOS inertia/momentum scrolling, then I might have something for you.
First of all, you need to add fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.
After including fastclick and attaching it to the body element, my code to interrupt scrolling looks like this:
scrollElement.style.overflow = 'hidden';
setTimeout(function() {
scrollElement.style.overflow = '';
}, 10);
The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.
Is there a Javascript event that I can hook into that fires when the page is refreshed, and Safari 'jumps' back to the scroll position you were at?
It's very frustrating, as the scroll event only fires on user/touch-induced scrolls, so will not fire in this case. I need to specifically find a way to bind to that event, as DOMContentLoaded, for example, fires even before that, and the window's load event would fire too late, as that will wait for all content to load.
Reason for this is that I am checking if an element is in view (using getBoundingClientRect).
Am I missing something here? As I'm not using jQuery, but vanilla JS, I have no document.ready() to try (though judging by the source code of it, I doubt it would work).
After some experimenting, it turns out that the load /onload event on the window triggers this jump in Safari Mobile (and presumably other browsers too), so binding to that event would suffice.
I hope this helps someone!
So, I'm running a small wordpress website which uses Livefyre comment system plugin. The website also uses Nicescroll, a plugin that makes your scroll bar 'cooler'. Now, whenever I try to create a space between letters inside the comment box, instead of a space, I get my window scrolled to the bottom of the page ( using Chrome ). I have tried various javascripts found on StackOverflow, without succes. I wanna mention that everytime I disable Nicescroll plugin, everything works perfectly.
What can I do to prevent my browser from scrolling to the bottom of the page when trying to use spacebar inside that specific textarea ? Also, I have a custom search box on my website, which apparently is not affected by nicescroll.
Well, you could just set the spacebarenabled option to false to disable scrolling via space bar at all (but users might expect that to work as it would with the normal scrollbar).
If that’s not an option, then you either have to get into the event handling this plugin uses and figure out a way to not have keypress events from textareas bubble up to where it catches them, or modify its event handling to have it check whether the target element of the event was a textarea or not before it scrolls.
I'm programming a Webpage/-Application for the iPhone. I need to scroll to a specific position after page reload, no matter where I scrolled to while using the page before.
The script I use works fine in firefox but not in mobileSafari. In contrast to firefox, mobileSafari seems to save the position I scrolled to previously and jumps there after reload, ignoring my scrollTo triggered on reload.
This is the code I use:
function scroller(){scrollTo(1000,1000);}
window.addEventListener("load",scroller, false);
It works with click-events that I trigger manually. If I click a button to trigger the scroll function than the scrolling is done.
I tried to trigger the click via a synthetic event javascript, but this does not work either.
Is there any way the scrolling can be archived on reload and/or other not explicitly user triggered events?
I did not find a solution for the actual problem which seems to be a bug. But I found a workaround. This is not to trigger the scrolling directly via an onload event but to use a setTimeout()
init(){
setTimeout(scrollTo(0, 1000), 10)
//more code
}
//more code
window.onload=init;
What about the iscroll prototype !?
I have a div that toggles in and out of display when you click on another div. How could I modify my code so that when the user minimizes the whole browser window it automatically toggles, hiding the div from view so when the user un-minimizes window the div is no longer visible.
Minimizing the window (or switching to another application) should fire the window.onblur event. Activating the window should fire window.onfocus
Implementation details may differ slightly between browsers but there seems to be no better way in default javascript (may be you can use some flash object if flash can detect minimizing/maximizing of the window to fire necessary events, but I'm not familiar with flash)
From a quick search it looks like you can attach an event to the windows resize event, then call the required toggle functions from there as usual. I havnt actually tested the linked sample though...
$(window).bind('resize', function() { ....
http://snipplr.com/view/6284/jquery--window-on-resize-event/
In JavaScript, there is no way to detect when a window is minimized.
You could try detecting a resize or blur event on the window, however those can be triggered by things other than a minimize.