I am working on this AngualarJS app on a touch device and there is a place where I am disabling scrolling through attaching a handler on touchmove. However, I have tested the device and can verify that a touchmove is not necesarrily triggered when the screen scrolls - only touchstart and touchend could just be triggered as well. The trick is to "tap a bit hard on the screen fast with a very slight upward drag motion".
How else could I disable scrolling? Note: I cannot e.preventDefault the touchstart event, as I need it for something else while the scrolling is disabled. Thank you!
In my viewport, disabled scroll have many ways:
e.preventDefault() but this one you don't allow
use CSS
how to make one place begin scroll? there are two doms: scroll-wrapper & scroll-area
scroll-area size bigger than scroll-wrapper
scroll-wrapper has overflow: scroll
So, stop area scroll:
they have the same size
overflow: hidden (touchmove listener change the CSS position can imitate scroll)
Now, you wanna disable the scroll of one area.Maybe you could just use CSS to do this.
Hope I can help you.
Related
Here is my scenario I have a web page which will navigate through using mousewheel and scrollbar. I have fixed the mousewheel problem.... But the problem where I use the scrollbar it will navigate to the end or go to the first it depending on the scrollbar you pressed up or down.
I know the error is $(window).scroll(function) here due I navigate from Div 1 to Div 2 which will fire the event a lot of times when the scroll bar moving.
Here is my fiddle
The problem is where i when i scroll using the bar beside down or up. It will trigger until the end of my onscroll event.
Is it possible when i press the scrollbar once only trigger once ?
An alternative way i know is hide the scrollbar and design a fixed position button up and down will resolve this problem but is it possible to do this with default scrollbar/overflow ?
Tried your fiddle. When using mouse wheel, it kept pending between headers 4 and 3 after I reached the 4th one. When I removed the $(window).scroll() function, it worked perfectly, both down and up.
The scrollbar, however, is quite a complicated issue - when you click/tap and drag, you simply can't "steal" the scrollbar from your pointer/finger - the user keeps dragging, yet you're trying to reposition the scrollbar/content forcibly. I don't think this is a good idea (from the UX point of view).
Not sure if it fits your requirements but in case I'd want to fully control the content, I'd completely remove the scrollbar in CSS and then use the mousewheel or swipe functions to control it.
"scroll" does not fire when content is overflow: hidden. "wheel" fires for wheel mouses but not on a magic trackpad or magic mouse. How can I detect the mouse interaction of attempting to scroll in this scenario?
You can get the mouse coordinates and other properties like movement easily.
Using that position you can choose when trigger an wheel event or just make the script to scroll the page.
check this fiddle (not mine) to get inspired
I'm trying for numerous days to solve the following issue.
I have a menu located on the top of the page which needed to be open using swipedown event (I'm using Hammer.js jQuery version).
Problem is, every time I try to interact using swipes I either scroll the page (swipeup) or pulling the page down same as described in the following question.
Here is what I've tried so far:
overflow: hidden; on the body element with an inner container with overflow: auto, swipe on top element still triggered document scroll.
Setting preventDefault on the document also disabled lower elements events in the DOM hierarchy and by that I had no swipe events working in the page.
Also tried using stopPropagation on the actual element when the event occurs, to prevent the bubbling up the chain for the event, the result cause the object to not respond to the events (swipes) and document scroll worked with no problems.
Any ideas how can I still keep page scroll but also when using common gestures, such as swipedown/swipeup, on specific elements that the element only will be affected?
Here is an example using JSFiddle, to better demonstrate the issue.
Would appreciate ideas/thoughts
I don't know if this will help, but I've always liked to use drag more than swipe. Using Hammer on my projects, swipes were a bit finicky. And from a UX standpoint, drag feels instantaneous vs a swipe. Much like, mousedown vs mouseup/click. So in instances where it's appropriate, and I believe in the case of showing swipey menu it is, I'd opt for drag.
Replacing your example with drag rather than swipe, and also using CSS transition, -webkit-transition, rather than jQuery's animate (drag will trigger like a mousemove, vs a click or a mouseup) seemed to make it work.
Hammer('.nav').on('dragdown', function(e){
e.gesture.preventDefault()
$(".blue").html("down")
$('.nav').css({"top":"0px"});
})
.on('dragup', function(e){
e.gesture.preventDefault()
$(".blue").html("dragup")
$('.nav').css({"top":"-150px"});
});
//Added in CSS, for .nav
.nav {-webkit-transition:0.5s top;}
Example
This does still have the page overscroll. A preventDefault() on document.ontouchstart would could fix that but that breaks scrolling. You might be able to do a selective preventDefault() by checking the scrollOffset perhaps. But I guess in the long run, I'd recommend something like iScroll.
Example
Also maybe tweak the hitbox for the drag to be a bit larger. Which I did in the last example. I attached the dragdown event on the document instead of the "menu" so the menu doesn't have to be visibly bigger.
Hammer(document).on("dragdown",function(e){
//calculate ratio of first touch from top
var pos=e.gesture.startEvent.center.pageY/window.innerHeight
if(pos<0.2){ //drag occurs in the first 20% of the screen
menu.style.marginTop="0px" //or animate here
e.gesture.preventDefault()
e.gesture.stopPropagation();
}
})
You should use the preventDefault function of the orginal gesture, to stop the browsers default behaviour, see here: https://github.com/EightMedia/hammer.js/wiki/Event-delegation-and-how-to-stopPropagation---preventDefaults
When you have a div element, on which you want to register swipe events, you would do the following:
$('#swipeDiv').hammer().on("swipe", function(ev) { ev.gesture.preventDefault(); });
That should prevent the scrolling of the page, but only if the swipe happens on the div element.
I have a div on which I listen for swipe events using jQuery mobile.
I was wondering how I could get the div to follow and move with the finger from the time that the swipe starts until the time that the swipe ends?
Almost like draggable only while the swipe is happening.
Although I would prefer to not use jQuery UI.
How can I do this properly and in the best way possible?
My method of doing this was on mouse down, set the offset of the div to the x location of the mouse. But that fires every pixel and seem inefficient. Also it happens on mouse-down, not on swipe.
Here is my code that listens for the swipe, in this case swipe right:
$('#main').on('swiperight', '.dataCard', function(event){
event.preventDefault();
// what happens on swipe here
});
Now, how can I get .dataCard to follow the finger as it swipes until the finger is picked up?
Well, you can inspect the event in a breaking in a debugger. Also, you cannot change positions of a "relative" element, it will always be in document flow position (hence why I asked if you had made the element absolute).
Does a div element not have an onscroll event handler?
The behaviour on my page doesn't seem to indicate the div onscroll event handler is recognized.
<div id='bd' onscroll='alert("Scroll Called");'></div>
Also,
Do div scroll events roll up to window scroll events, as per DOM event bubbling ?
Depending on which version of HTML you're using, you could use the onwheel event, instead.
The onscroll event works only if all the following are true:
The div has overflow: auto, overflow: scroll, overflow-y: scroll, etc.
The div currently has a visible scrollbar that can scroll.
The mouse movement actually causes the scrollbar to scroll.
So the onscroll event is not really suited for detecting general mouse wheel movement.
Please note that the onwheel event is new in HTML 5. According to w3schools, it is pretty widely supported, though.
I scratched my head on this one too, until I started learning more about DOCTYPE directives. The onscroll attribute is not supported in most recent version of the HTML spec. It'll show as invalid syntax in Visual Studio. It might work in many browsers, but it's still invalid code.
Instead, you canan event using Javascript or jQuery. I use an approach like this to synchronize scrolling on two separate div's:
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});
Yes but the element needs to have a scrollbar. You can give it one with either overflow: auto (which gives you a scrollbar when the content is tall enough) or overflow: scroll. (These can be set specifically for x & y as well overflow-y: scroll...)
Although they don't bubble once the div has been scrolled to the bottom the window will start scrolling. (Basically if the div can scroll it will intercept the scroll event, but if it can't then it will go to the page)
I know it may not be exactly what you're looking for, but a lot of javascript frameworks can help you with this. It is not necessary for the div to have a scrollbar for you to hook to the scroll events.
Eg. Mootools has the mousewheel event. Demo here. (It has scrollbars, but you can use Firebug to remove the scrollbars and try -- it still works).
I have used this myself on a site I made a while back. If you scroll while holding your mouse over the images it prevents the default page scrolling and instead slides the image-bar.
JQUERY scroll() can help you.
$("#gridTableContainer").scroll(function() {
HandlingScrollingStuff();
});