I'm putting the finishing touches on this parallax website but I'm having trouble preventing some very unattractive horizontal scrolling effects (try it yourself on a touch device by dragging directly to the left).
I've adapted the parallax technique described here using 3D CSS transforms. Unfortunately, one of the side-effects seems to be that the browser thinks the images are wider than the viewport, even though they aren't. I've already tried:
Adding overflow-x: hidden; to the parallax images' containing div, and while that's hidden the horizontal scrollbar, it alone does not actually prevent horizontal scrolling.
Adding a partial workaround scroll event listener to reset the scrollLeft of the container back to 0 with each scroll, which solves the problem entirely on desktop (AFAICT) and partly on mobile (at least when scrolling diagonally).
Unfortunately, it seems that, at least on Android (I don't have an iPhone to test) it's still possible to scroll horizontally without triggering the scroll event workaround. Even more mystifying, while it's in this weird horizontally-scrolled mode I've programmatically traversed the entire DOM and not a single element has a scrollLeft property != 0. I've also called $('*').scrollLeft(0); from the console and it doesn't reset the scrolling. Now calling .preventDefault() on all touchmove events does prevent the horizontal scrolling, but it also effectively breaks the site as a whole since it prevents vertical scrolling too--so that's a no-go.
So how is this thing scrolling horizontally if nothing has a scrollLeft other than 0, and how can I prevent/workaround this scrolling behavior?
Related
I am working on a carousel component where elements change on an up and down scroll. When you're scrolling with your mouse everything works pretty nicely but the touchpad scroll sometimes scrolls the elements all the way to the end. The component can be viewed here: https://2r70m7.csb.app/. Is it possible to somehow control a single touchpad scroll, so that no matter how intense it is, it can only move a single element in the carousel?
Thanks
Is it possible to prevent the page from scrolling while dragging items from mobile devices?
Even the sortable demo page has this problem (if you load it from an android/iphone/ipad): http://www.telerik.com/kendo-angular-ui/components/sortable/
Dragging sideways is less of an issue due to no scroll being necessary due to the width but vertical dragging is not working as I would expect.
It's pretty "brute force" and could limit your ability to drag an element to a position outside the current viewport, but adding a class with the style or directly adding the style of overflow: hidden to the html element while the item drag is active will prevent scrolling.
I've done this for modal windows to prevent the page in the back from scrolling while the modal is active.
Last time I used it a cross-browser issue required the use of overflow: hidden !important if it's not working for you.
I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.
This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.
I've made a page with smooth vertical scrolling, and I was wondering if you can somehow "block" so the user can't use his mouse or touchpad to scroll on the page - when they do that the whole idea kinda stops.
you can see the scrolling on my webpage.
enter link description here
So far I've just hidden the scrollbar so they can't do it.
I guess you can say what I'm asking for is, can you "block" manually scrolling?
Thanks.
they are several solutions, but there's none that I found perfect. The simpliest is:
set the css property "overflow" to hidden (if on your body, you must set height and width to 100% on body and html, plus no margins/padding borders).
also you can add a listenner to scroll events, then prevent them with event.prevendDefault().
But they are always undesirable effects that can "scroll" pages(and blocks) without a mousescroll:
first is selection: your layout break here. To try it, select from the upper and go down, then the page will scroll(with chrome). this is unlikely to happen when there is no text and no drag and drops, but once it happens your users are lost since there is no scrollbars.
second is scrollIntoView(). You can call that via javascript, or the browser will do it automatically sometimes ( href to an anchor, input focus, "scroll memory at reload" ). This is were there is most risks, but there is very few control over these.
finally, one "bad" solution I found is to regularly force scrollTop property of elements to 0. But most probably you won't have to get there and the CSS body { overflow: hidden; height: 100% } will be sufficient.
The way you've done it is fine. I don't think you can cancel a scroll event, like you can with other event (keypress, button clicks etc..)
Setting overflow to hidden would be how I'd do it as well, as that completely stops all scrolling. The event doesn't even take place in the background.
The following code will block scrolling with the mousewheel. While this isn't relevant for me as I can't use the mousewheel to scroll anyway, it may block scrolling with your touchpad.
Just add this to one of your included js files...
window.onmousewheel = document.onmousewheel = function(event){
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
Here's an example...
http://jsfiddle.net/johncmolyneux/aSw2g/
I'm building a web app that has a grid of many small scrollable divs (actually, Ace editors), and this grid has enough elements that it is larger than the window. When a user begins scrolling over empty space, I want them to be scrolling the window itself; when a user begins scrolling inside a grid element, I want them to scroll the div contents there. The thing is, if a user begins scrolling over empty space, and then scrolls such that their mouse goes over a grid element, that scrollable div captures all the scrolling events, interrupting the user's flow over the grid and "trapping" them inside the grid element.
I can't manually capture onmousewheel events, since AFAIK there's no way to capture horizontal mouse wheel movement separately from vertical, and I want users on Mac OS X to be able to scroll in all directions. I've thought about using JS to add an invisible div with a very high z-index on the first onscroll event, and removing it as soon as onscroll events aren't triggered for a certain period of time. Haven't yet coded this up, but I'm wondering if there's a better solution, or if there are any potential pitfalls that I haven't thought of. Any help or advice would be great! Thanks!
I think a solution for this would be incredibly difficult due to browser support, and the actual solution, which would probably be something like calculating the scroll, backtracking the div, and applying the scroll to the page.
You could do something like this:
$('div').scroll(function(e){
// figure out how much it has scrolled
window.scrollBy(0,howmuch);
});
I don't recommend this solution in the slightest though, I think the better option would be to set the divs to overflow:hidden; and pick up a solid scroll plugin, and use that to customize the scroll behavior on the divs.