0

On my site I have scrollable menus and content inside a fixed page. Often upon loading the page these elements scroll without issue. But then when the body/html elements are grabbed/focused on the page it just bounces around and the scrollable elements become unscrollable. Sometimes the body/html are automatically focused on. This behaviour can be fixed by clicking something within the scrollable elements thereby adjusting the focus.

I'm wondering if there's a way to check what element is currently active/grabbed/focused/whatever and if it's the body/html changing it to the content.

Christopher Reid
  • 4,318
  • 3
  • 35
  • 74
  • Please provide some source code, maybe html page. It is hard to understand what caused some problem. – Matrosov Oleksandr Apr 16 '14 at 22:40
  • @MatrosovAlexander I didn't add code because there are way too many considerations that could be affecting my issue. I figured it out though... Using `preventDefault` on a `touchmove` event listener for body/html and then `stopPropagation` on `touchmove` for all the scrollable elements fixes the issue. See my answer if you're interested. I've been trying to figure out how to do this for a while and the solution is incredibly useful for controlling scroll behaviour on touch devices. – Christopher Reid Apr 17 '14 at 02:29
  • possible duplicate of [iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?](http://stackoverflow.com/questions/10238084/ios-safari-how-to-disable-overscroll-but-allow-scrollable-divs-to-scroll-norma) – mynameisnotallowed Sep 12 '14 at 10:33

2 Answers2

3

I found the solution by disabling scrolling on all elements with preventDefault and allowing it on certain elements with stopPropagation

I'm using Sizzle (JQuery's selector engine) to select DOM elements. You can just replace the $ selectors with standard JS selection (document.getElementById etc.), but I'd highly recommend using Sizzle if you don't use jQuery.

prevent scroll on all elements:

document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
$('body')[0].addEventListener('touchmove', function(e){e.preventDefault()}, false);

allow scroll for certain elements: 

$('#SCROLLABLE_DIV')[0].addEventListener('touchmove', function(e){e.stopPropagation()}, false);
Christopher Reid
  • 4,318
  • 3
  • 35
  • 74
0

NEWEST UPDATE first: I canceled my own attempts to find a solution, as I came around a working example here: https://stackoverflow.com/questions/29894997 using iNoBounce.js. Thus this is my last edit here on this post.

And hereby I provide my working example.

The old version of my example you'll still find here how to prevent body scrolling on mobile devices

ddlab
  • 918
  • 13
  • 28