9

Use Case : - If the user is scrolling an inner div it should not scroll the outer div once inner div end has reached.

The following code works perfectly fine if the inner div has already reached the end. i.e the touchstart/touchmove event triggers after the inner div has reached the end.

But in case I do not lift the touch and keeps scrolling and if the end of the inner div has reached in this process, it starts scrolling the outer div. 

$('body').find('.scrollableDiv').on(
    {
      'touchstart' :  function(e) {
        touchStartEvent = e;
      },
      'touchmove' : function(e) {
        e.stopImmediatePropagation();
        $this = $(this);
        if ((e.originalEvent.touches[0].pageY > touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop == 0) || 
            (e.originalEvent.touches[0].pageY < touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)){
          e.preventDefault();
        }
      },  
  });

How do I stop scrolling as soon as the end of the inner div is reached? I am trying to achieve this on a browser on android device. Can someone help me in this regard?

NOTE : The user should even be able to scroll the outer div.

Thanks in advance.

Keen Sage
  • 1,899
  • 5
  • 26
  • 44
  • This strikes me as a Bad Idea. You're trying to write code that belongs in the web browser itself, in order to change the browser's user interface while on your site in a way that is inconsistent with how it works on other sites, by disabling a function the user may well want. – j__m Sep 02 '13 at 19:14
  • I am sorry, if I didn't make my point clear. Actually I am trying to give a functionality where the user can scroll both the divs independently and scrolling a inner div should never scroll the outer div. Consider a situation where the user did a fast scrolling in the inner div which would result in scrolling of the page as soon as the inner div has reached end and then the user has to scroll the page up again to bring the inner div into the visible view. Isn't this a bad UX? – Keen Sage Sep 03 '13 at 07:52
  • Mozilla seems to agree with you, as Firefox does not do this on any platform, either on desktop (with the wheel) or on mobile (with the finger). Apple seems to disagree with you. I think that's probably where the decision belongs, and trying to make it work differently on different sites is itself bad UX. – j__m Sep 03 '13 at 13:41

2 Answers2

1

I'm afraid I don't have time to write the explicit code to solve this, but I've got a conceptual solution for you that still might help you.

  1. On DOM ready, wrap each overflow: scroll element with a wrapper with position: relative.
  2. On touch start, for each ancestor with overflow: scroll, set overflow: visible, position: absolute, get calculated height & width and apply these as inline styles, and set top to be the negative of scrollTop — and set the wrapper's overflow to hidden: this means it will be in the same position it was in the first place but unable to move through scrolling.
  3. On touch end, remove the styles applied in step 2.

I can already see caveats:

  1. If you're using relative or absolute positioning for layout within your overflow: scroll elements (and they do not have relative or absolute positioning themselves), this will screw with your layout.
  2. If any scrolling elements are wrapped over after DOM ready, you will need to apply a wrapper for each.

…but it's definitely feasible…

Barney
  • 16,181
  • 5
  • 62
  • 76
0

If you're using JQuery I would use something that uses scrollTop() to check to see if the user has reached the bottom of the scrollable div and if so, maybe trigger an event that cancels out their scrolling any further? Or something that you may want to do.

Something along the lines of: 

$(document).ready(function(){
    $('.scrollableDiv').bind('scroll',scroll_check); 
});

function scroll_check(e){
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){
      // set overflow-y hidden?
    }
}
Andrew Ice
  • 831
  • 4
  • 16
  • scroll is basically called after the object/div is already scrolled. Here is a reference article. http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ – Keen Sage Aug 28 '13 at 18:11