Can I disable a horizontal mouse scroll with JS? - javascript

I am building a one page site that uses javascript to navigate vertically and horizontally across the page to see different content.
I want the user to be able to scroll up and down but not horizontally (currently the user can scroll horizontally in FireFox and see content they shouldn't be able to see unless they use the navigation.
Unfortunately I can't use overflow-x: hidden; because it interferes with the smooth-scroll JS I am using.
I did find some script (below) to disable any mouse wheel movement but I only want to disable the horizontal movement. Can anyone help?
document.addEventListener('DOMMouseScroll', function(e){
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
return false;
}, false);

I ran into this same problem as well, the "overflow-x:hidden" CSS trick is nice, but it doesn't work for the horizontal scrolling capability of the Mac Mouse (FF only). The code you have works fine, but obviously kills both vertical and horizontal scrolling. I think the extra bit you need there is to check the "e.axis" property. Here's what I have:
document.addEventListener('DOMMouseScroll', function(e) {
if (e.axis == e.HORIZONTAL_AXIS) {
e.stopPropagation();
e.preventDefault();
e.cancelBubble = false;
}
return false;
}, false);
Hope that helps!

Well, your code work only in firefox, so here is a more universal solution, but it's also kill the vertical scroll and so far I couldn't figure out how to stop that.
if(window.addEventListener){
window.addEventListener('DOMMouseScroll',wheel,false);}
function wheel(event){
event.preventDefault();
event.returnValue=false;}
window.onmousewheel=document.onmousewheel=wheel;

After some experimentation, this bit of code works
$(window).bind('mousewheel', function(e){
if(e.originalEvent.wheelDeltaX != 0) {
e.preventDefault();
}
});
$(document).keydown(function(e){
if (e.keyCode == 37) {
e.preventDefault();
}
if (e.keyCode == 39) {
e.preventDefault();
}
});
This prevents the OSX magic mouse, track pad and default arrow keys from causing horz scrolling in safari, chrome and ff as of their latest release.
I can make no claim to this being the best solution, but it works. I fear it may cause performance issues as its comparing the x-axis delta of wheel scroll to 0.

You can do it simply with css styles.
<body style=" overflow-x:hidden; ">
<style>
body { overflow-x:hidden; }
</style>

Related

Disable all scrolling on webpage

I would like to know if it is possible to disable all scrolling on a webpage.
I am currently using
html, body { overflow:hidden; }
The issue is that this does not work on iOS devices and if you hold in the mouse wheel and drag it down you can also scroll, so it seems like a very poor solution to the problem
Is there a way to disable all methods of scrolling on all devices and then re-enable it?
I have had this exact same issue, i fixed it with the following;
var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
disableScroll = true;
scrollPos = $(window).scrollTop();
}
function enableScroll() {
disableScroll = false;
}
$(function(){
$(window).bind('scroll', function(){
if(disableScroll) $(window).scrollTop(scrollPos);
});
$(window).bind('touchmove', function(){
$(window).trigger('scroll');
});
});
the touch move is bound to the window as the window scroll event is not fired until touch move is completed, so this allows a much smoother experience on iOS!
This isn't a perfect solution as you can 'throw' the page, but it will return to desired position when the throw has complete (as the window scroll event will then be fired). This is because iOS browsers strip out a lot of events for performance. also setTimeout and setInterval functions do not fire whilst the page is being thrown, having a loop isn't an option either!
see here http://jsfiddle.net/8T26k/

Disable scrolling when touch moving certain element

I have a page with a section to sketch a drawing in. But the touchmove events, at least the vertical ones, are also scrolling the page (which degrades the sketching experience) when using it on a mobile browser. Is there a way to either a) disable & re-enable the scrolling of the page (so I can turn it off when each line is started, but turn it back on after each is done), or b) disable the default handling of touchmove events (and presumably the scrolling) that go to the canvas the sketch is drawn in (I can't just disable them completely, as the sketching uses them)?
I've used jquery-mobile vmouse handlers for the sketch, if that makes a difference.
Update: On an iPhone, if I select the canvas to be sketched in, or just hold my finger for a bit before drawing, the page doesn't scroll, and not because of anything I coded in the page.
Set the touch-action CSS property to none, which works even with passive event listeners:
touch-action: none;
Applying this property to an element will not trigger the default (scroll) behavior when the event is originating from that element.
Note: As pointed out in the comments by #nevf, this solution may no longer work (at least in Chrome) due to performance changes. The recommendation is to use touch-action which is also suggested by #JohnWeisz's answer.
Similar to the answer given by #Llepwryd, I used a combination of ontouchstart and ontouchmove to prevent scrolling when it is on a certain element.
Taken as-is from a project of mine:
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#mobileMenuHeader').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
Essentially, what I am doing is listening on the touch start to see whether it begins on an element that is a child of another using jQuery .closest and allowing that to turn on/off the touch movement doing scrolling. The e.target refers to the element that the touch start begins with.
You want to prevent the default on the touch move event however you also need to clear your flag for this at the end of the touch event otherwise no touch scroll events will work.
This can be accomplished without jQuery however for my usage, I already had jQuery and didn't need to code something up to find whether the element has a particular parent.
Tested in Chrome on Android and an iPod Touch as of 2013-06-18
There is a little "hack" on CSS that also allows you to disable scrolling:
.lock-screen {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
Adding that class to the body will prevent scrolling.
document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
This should prevent scrolling, but it will also break other touch events unless you define a custom way to handle them.
The ultimate solution would be setting overflow: hidden; on document.documentElement like so:
/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
document.documentElement.style.overflow = 'hidden';
});
document.addEventListener('touchend', function(e) {
document.documentElement.style.overflow = 'auto';
});
By setting overflow: hidden on start of touch it makes everything exceeding window hidden thus removing availability to scroll anything (no content to scroll).
After touchend the lock can be freed by setting overflow to auto (the default value).
It is better to append this to <html> because <body> may be used to do some styling, plus it can make children behave unexpectedly.
EDIT:
About touch-action: none; - Safari doesn't support it according to MDN.
try overflow hidden on the thing you don't want to scroll while touch event is happening. e.g set overflow hidden on Start and set it back to auto on end.
Did you try it ? I'd be interested to know if this would work.
document.addEventListener('ontouchstart', function(e) {
document.body.style.overflow = "hidden";
}, false);
document.addEventListener('ontouchmove', function(e) {
document.body.style.overflow = "auto";
}, false);
I found that ev.stopPropagation(); worked for me.
To my surprise, the "preventDefault()" method is working for me on latest Google Chrome (version 85) on iOS 13.7. It also works on Safari on the same device and also working on my Android 8.0 tablet.
I am currently implemented it for 2D view on my site here:
https://papercraft-maker.com
this worked for me on iphone
$(".owl-carousel").on('touchstart', function (e) {
e.preventDefault();
});
the modern way (2022) of doing this is using pointer events as outlined here in the mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
Pointer events build on touchstart and other touch events and actually stop scroll events by default along with other improvements.

Mobile / Touch Enabled Screens - horizontal scroll on swipe

This question has been asked after a detailed discussion on this SO question
Problem:
I need a horizontal scroll which can be scrolled using mouse drag on desktops and swipe events on touch enabled screens
Possible Solution:
I tried using the jQuery dragscrollable which works fine on desktops but not on touch enabled devices
So then I went on to explore Touch Swipe Jquery Plugin and came up with a possible solution at JSFiddle Code and the result for the JSFiddle can be found here
You can also find a working demo at here
My java script code is as follows
//to detect if device has touch enabled
var is_touch_device = 'ontouchstart' in document.documentElement;
$(function()
{
$('.myClass').dragscrollable();
//if touch is enabled then we have to map the swipe event
if(is_touch_device)
$('.panel_list').swipe( { swipeStatus:scroll_panel_list, allowPageScroll:'horizontal' } );
function scroll_panel_list(event, phase, direction, distance)
{
var pos = $('.myClass').scrollLeft();
if(direction == 'left')
{
$('.myClass').animate({scrollLeft: pos + 200} );
}
if(direction == 'right')
{
$('.myClass').animate({scrollLeft: pos - 200} );
}
}
});​
I have tested it works fine on Android browser but not very reponsive on iPhone.
Can someone help me come up with a better solution ? I am using twitter bootstrap
EDIT:1
Well now I guess I might have hit upon a nice plugin in that seems to work fine on desktops and touch enabled devices, the plugin is called jquery.dragscroll, I have an updated demo here
EDIT:2
There seems to be another plugin that has support for touch-enabled devices, it is called Overscroll. I haven't evaluated it as yet
Additionally, there is the "Swipeview" script
http://cubiq.org/swipeview
I found an older solution and modified it for horizontal scrolling. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.
Usage:
touchHorizScroll('divIDtoScroll');
Functions:
function touchHorizScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollLeft+event.touches[0].pageX;
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollLeft=scrollStartPos-event.touches[0].pageX;
},false);
}
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
Original Vertical one-finger touch scroll:
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
Vertical now has a simplified CSS solution, doesn't work for horizontal DIV scroll on mobile though:
-webkit-overflow-scrolling: touch
The question also asks for mouse-grab on desktop, which can be accomplished with Nice Scroll, and does work in tandem with my solution above if you need it:
https://github.com/inuyaksa/jquery.nicescroll
var nice = $("#mydiv").getNiceScroll({horizrailenabled: true, hwacceleration: true});
This is possible with
http://labs.rampinteractive.co.uk/touchSwipe/demos/Page_scrolling.html
$('body').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {
switch (direction) {
case 'left':
// Code here
break;
case 'right':
//Code here
break;
}
},
allowPageScroll: "vertical"
});

prevent window from dragging in ios5 mobile browser

I'm working on an iPad browser games and can't seem to lock the window. I've prevented scroll bars using typical overflow techniques, but the entire window still drags up and down (the new rubberband - type effect)
Is there a way to remove this window dragging?
Thannks
Bind to touchmove and preventDefault action which is scrolling
document.body.addEventListener('touchmove', function (ev) {
ev.preventDefault();
});
Or with jQuery
$('body').bind('touchmove', function (ev) {
ev.preventDefault();
});
EDIT: I've actually come across another solution that may be even easier, try this
body { overflow: hidden; }

Is there a way to set the window's scroll position without using scroll() or scrollTo()?

...the reason I ask is that Safari has a bug in its implementation of scroll() that is breaking my UI.
Imagine a page:
<body>
<div id="huge" style="width: 4000px; height: 4000px;"></div>
</body>
...so that you get both horizontal and vertical scrollbars. Now, normally when you press the scrollbar, the page scrolls (vertically). For the purposes of our fancy UI we don't want that to happen, so we squash the keyDown event:
window.onkeydown = function(e) {
if(e.keyCode == 32)
{
return false;
}
};
This works great...unless we decide that instead of preventing scrolling altogether, we want our own, custom scrolling behavior:
window.onkeydown = function(e) {
if(e.keyCode == 32)
{
window.scroll(foo, bar); // Causes odd behavior in Safari
return false;
}
};
In other browsers (Chrome, Firefox), this will instantaneously move the window's scroll position to the desired coordinates. But in Safari this causes the window to animate to the desired scroll position, similar to the scrolling animation that takes place if you press the space bar.
Note that if you trigger this scroll off of any key OTHER than the space bar, the animation does not take place; the window scrolls instantly as in other browsers.
If you happen to be scrolling, say, 1000 pixels or more, then the animated scroll can induce some serious discomfort.
I'm scratching my head trying to find a way around this. I suspect that there isn't one, but I'm hoping some God of Javascript here can suggest something. I'd really like to be able to use the space bar for this command.
If you know where in the document you want to scroll to then you can simply use named anchors. Setting document.location to the anchor (e.g. #top, #div50 or whatever) should be very reliable.
Use document.documentElement.scrollTop = ... (and document.body in some browsers).

Categories

Resources