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
Related
Hay,
I'm using jquery.fullpage.min.js plugin in my site for fullpage and scrolloverflow.min.js for scroll inside divs. I set autoScrolling:false, scrollOverflow:true because i I don't want auto scrolling, and I want overflow scroll inside div.
The problem is that when I scroll the overflowed div, the whole page scrolled too.
I tried use normalScrollElements:"my-div", but it works only when autoScrolling:true.
how can I avoid page scroll when user scroll the overflowed div?
Thank for help!
Few things:
autoScrolling:false, scrollOverflow:true are not compatible options. You can probably see an error message saying exactly this in your JS console. So expect problems in different browsers :)
normalScrollElements won't have any effect when using autoScrolling:false.
normalScrollElements won't have any effect inside scrollOverflow
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 have two divs with the total height of the viewport and a button for scrolling from one to another with ScrollTo jquery plugin. The problem is that I want to prevent the posibility of manual scroll.
I want that when someone scrolls with mouse down, the browser scroll automatically to the second view, and when I scroll to top gets the previous view.
I don't know if I'm explaining well, here an example: http://orangina.eu/heritage
Try to scroll in this webpage, this is what I need.
Thanks!
Correct me if I'm wrong but it looks to me like you're trying to disable the browsers default scrolling behaviour, attach events to scroll up and scroll down and scroll up or down to the height of the page's height.
The way I would do this is disable the browser's default scrolling behaviour with overflow:hidden to the body and html.
Then you can bind the jQuery "mousewheel" and "DOMMouseScroll" to the div checking for "event.originalEvent.detail > 0" or "e.originalEvent.wheelDelta < 0" for down scrolling or else for scrolling up.
Finally add your function call inside the if or else depending on the downscroll or upscroll.
I can write the code if you want but it might help you more if you try this yourself.
You can achieve that same effect by using fullPage.js plugin for jQuery.
Compatible with old browsers such as IE 8.
Touch devices compatible
CSS3 animations improving performance
Lots of options, callbacks and methods.
Thanks for all replies!
I solved my problem, instead of using standard scrolling I used the translateY css property. Setting a data-id to each page layer and doing translateY(100%, 200%, 300%...) every time I want to scroll down/up.
i have several focusable elements in my app, so when i'm focusing a scrollable div, the focus goes to another focusable element instead of scrolling that div when using the trackpad. how can i prevent this? i want it to scroll that div first, and if it cant scroll anymore then jump to the next element. how can i achieve this?
Take a look at the Kitchen Sink example for scrolling Divs:
http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/css3/overflow.html
NOTE: Use Firebug/Chrome Developer tool to view the javascript doing all the work.
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.