Prevent page zoom while allowing wheel scroll? - javascript

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.

Related

Javascript mouse scroll delta

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.

Scroll event in Phonegap

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?

Detecting the end (drop) of a Scrollbar Event

I need to detect when a user has stopped scrolling only in the Scrollbar.
There is this site: http://beoplay.com/Products/BeoplayA9, that is already doing what I need.
I need to readjust page position if user has scrolled (with the scroll bar) and left the scroll between two pages. Notice that in the example website the page position is only readjusted at the 'drop' of the scroll bar.
This question has been asked many times, but not this way, I've already seen this plugin by James Padolsey, but it doesn't work as the example website.
I have some code already in a jsfiddle: http://jsfiddle.net/promatik/7rkGV/
The handling of the mouse wheel is done, but now I can't figure out how to handle the scroll bar move to know when it was dropped.
Maybe there is a away to differentiate the event from a wheel scroll and a scroll bar scroll.
$(window).on('scroll', function (event) {
console.log(event);
});
Does anyone know how to replicate the effect in the example?

How can I make mouse wheel not work using jQuery or JavaScript?

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/

Two-fingered scroll js on touchpad

We have developed a site whcih has a horizontal orientation and are wanting to implement touchpad control with two fingers move left/right.
When you move two fingers left/right on touchpad, the site page is being scrolled left/right. Now we have implemented touchpad control with two fingers move up/down and page scrolled left/right.
How can we change touchpad control with two fingers move from up/down to left/right to scroll site page left/right using js or jQuery?
I may be a little late but had the same question before I stumbled over this question.
A little further investigation lead me to think that the best bet to capture trackpad scrolling would be the wheel event.
function doScroll(e) {
// positive deltas are top and left
// down and right are negative
// horizontal offset e.deltaX
// vertical offset e.deltaY
console.log(`x:${e.deltaX} y:${e.deltaY}`);
e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);
I have prepared a fiddle that tells you the scroll direction and offset values but prevents the scrolling itself.
The wheel event has a delta property that (at least in Chrome) is sensitive to momentum and gives you the current relative scroll offset rather than the absolute scroll position available in the scroll event.
Usually when you want to take over touch events in script, you add something like this to prevent the usual scroll and zoom:
$("body").bind("touchstart", function(e) {
e.preventDefault();
})
What you need to do is change what can be scrolled. If your page is big enough where left/right scrolling makes sense, the browser will allow it be scrolled that way.
Basically, if you only want them scrolling in a certain direction, only make content in that direction. If necessary, you can achieve this by having a container div of the specific size you want with overflow set to none.

Categories