is there any way to enhance scroll functionality in javascript to force it to scroll vertically to specific element when user uses mouse wheel to scroll?
just want to implement functionality like single page applications have.
Yes there is. You can listen for the wheel event, which will be triggered when the user scrolls. You can then prevent the default action to stop the window from scrolling and implement whatever you want the page to do on scroll.
Related
Is it possible to prevent scroll wheel page zoom while allowing page scrolling with the scroll wheel? Is there a way to perhaps let the scroll event through while preventing the event responsible for the page zoom with event.preventDefault()?
For example, this code works nicely to prevent scroll wheel page zoom...
window.addEventListener ('wheel', function (event) {
if (event.ctrlKey || event.shiftKey) {
event.preventDefault ();
}
}, false);
However, it also prevents scroll wheel page scrolling, and I still want scroll wheel page scrolling while the Ctrl/Shift key is pressed. That is what I am trying to accomplish.
That example code is plain JavaScript, but I am working with jQuery, so if there is a way to simulate a default-looking scroll after preventing the normal wheel scroll event, that would suffice.
Edit: I need to be able to scroll the page with the scroll wheel while preventing the page zoom.
Using Phonegap I'm trying to update an element when the user scrolls. Using window.onscroll, the event is only triggered once the scrolling has finished. I need to react on the scrolling while the user scrolls. I found out you can use
document.body.addEventListener('touchmove', function(){})
which seems to work well while the user has his (her) finger on the screen, but if he flips the content and and releases his finger, the event will only be triggered after the scrolling has stopped.
Is there any way to track the scrolling while the user scrolls in Phonegap?
How can I stop user from using mouse wheel to scroll HTML page?
Normally we use the mouse wheel to scroll page. I the page to keep still even when user triggers the mouse wheel. What should I do?
window.onmousewheel=function(){return false}
http://jsfiddle.net/vBCbP/
Hover events are playing an important role in the navigation of my web page, and I don't want the user to get distracted by triggering them accidentally.
I'm aware of hoverIntent, which doesn't fire a hover event until the mouse has slowed down sufficiently. However, it always fires a hover event when the user scrolls down and lands atop the element.
Google Images manages to solve this quite beautifully: it doesn't fire hovers when scrolling down, and additionally even jerking the mouse a tiny bit after scrolling into an element doesn't trigger a hover.
Is there any plugin out there that implements hovering behavior similar to Google Images?
Maybe with this will help: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
So you will know when the user is scrolling, so you will also know not to fire the hover-event.
Good day. I got an HTML page which is small and has no scroll bar. However i need to determine when and what direction scroller was moved. So i need to determine scroll button on my mouse is moving.
How can i do it?
Check out the jQuery Mousewheel plugin. Then you can simply bind an event to any element to check if the wheel was used while the mouse was over it.
$('body').mousewheel(function(delta){
// Do stuff
});
Note that it's not too user friendly to not have a scrollbar and rely only on the mousewheel. There are other ways people expect to be able to scroll, like the arrow keys for example.