I need to prevent horizontal scroll in my web app. I tried with preventDefault() on touchmove event but it prevent vertical scroll too.
some idea?^^
my try:
$(document).bind("touchmove", function(event) {
event.preventDefault();
});
The only way I can see doing this is to manually code the scrolling functionality, so will start off with the above code to prevent the default functionality and then inspect the event properties to decide how to scroll the page setting window.scrollTop appropriately to vertically scroll the page.
Related
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.
I am using
#HostListener('window:scroll', ['$event'])
handleScroll(event) {
this.scrollYPos = document.body.scrollTop;
}
to get the main scrollbar scroll position when it is scrolling and I am moving a div according to the scroll location.
When I use the mouse to scroll with the scrollwheel or if I press the scrollbar arrow buttons you can see there is a delay when the div is moving into position but I want it to look like it is stuck in position.
However if I drag the scrollbar handlebar I don't see this delay and the div is stuck like it should be.
Is the scroll event different when dragging the handlebar versus scrolling with the scrollbar arrow buttons or the mousewheel? Or how fast the event is propagated?
Please note in this scenario I am not able to use absolute or fixed position.
I am testing in latest Chrome...
UPDATE
This behavior is the same on Chrome and IE. Firefox however works well no matter where I scroll.
I'm trying to make a website similar to this http://www.grannyssecret.com (just the landing page).
if you go there and scroll up, hidden footer appears smoothly, then if you scroll down again the footer goes down.
my HTML file can imitate the same thing when I click the button, but it doesn't work when I try to animate footer by scrolling a mouse wheel.
the problem is that scrolling event is firing multiple times.
also, when overflow is set to hidden scrolling event doesn't fire.
Any idea to work my way around this problem?
I can't seem to use jquery on jsfiddle https://jsfiddle.net/vd6qgLL2/3/
Try to use "wheel" event instead of "scroll".
document.getElementsByTagName("body")[0].addEventListener("wheel", function () {
//your code here
});
Please find your refactored fiddle: https://jsfiddle.net/mp0a6Ln6/
I'm developing a mobile app with jQuery mobile and I have the following issue:
I have a menu which has a div inside with a vertical scroll. Once the scroll reaches the bottom of the container, it starts scrolling the page itself and this is not what I want. Is there a way to prevent the behavior? I mean, allow to scroll the menu's scroll until the bottom and when it happens, deny the page scroll when I'm scrolling on the menu?
Update:
Here's a raw example that has the same problem - http://jsfiddle.net/Wg8pk/.
If you scroll down the "Menu Options", it will scroll down the page when the menu reaches the end.
How about calling event.preventDefault() on the element you are scrolling:
$('#my-scroll-div').bind('touchmove', function (event) {
event.preventDefault();
});
I'm not sure which event would be better to bind to but touchmove seems like it would work. If you setup a jsfiddle of your code we can give better advice.
You need to make the menu have a fixed height and then using css to prevent overflow.
user overflow:hidden; that should work
On a webpage can I hijack the vertical scrolling action and make it horizontal?
Please try and ignore the potential usability issues.
On a webpage can I hijack the vertical scrolling action and make it horizontal?
Not as far as I know (except maybe by rotating the element - but that is probably not what you want).
You would have to re-arrange the contents to make the vertical scroll bar go away, and force a horizontal one instead.
Whether that is possible will strongly depend on the nature of the HTML elements inside the page.
Here's a jQuery Plugin that does this, and you can specify it to only work when the mouse is over the target element:
http://flowplayer.org/tools/scrollable/index.html
Yes you can do this.
Vertical scrolling is set to element.scrollTop
You could simply add a loop that catches scrollTop when it changes, sets it back to zero and then sets the scrollLeft to be = to the changed position.
More so, an even better solution is to overwrite the onscroll event.
window.onscroll = function(event){
event.preventDefault() // Stops the page from scrolling vertically.
window.scrollLeft = event.scrollTop // This is not the correct event attribute, youll have to locate it yourself.
}
You could hook into the scroll event, check which plane is being scrolled, if it was the vertical then set the difference as the horizontal scroll and set the vertical scroll to it's previous value. Though I can imagine that would be incredibly expensive.