How to fix getting stuck when scrolling up in Framework7

The problem in Framework7

In most webapps for iOS (not only Framework7) that use -webkit-overflow-scrolling:touch for scrolling within elements instead of the whole body you will experience the following issue:

You scroll up to the very top of the document and then you scroll down immediately when you get the bounce back. You will notice that you’re stuck. The only way to escape from this is to release the screen, wait 1-2 seconds and then scroll.

The solution

So, here is the magic fix for you:

$scroller = $(".page-content");
$scroller.each(function (i, el) {
  var $scrollContainer = $(el);
  $scrollContainer.bind('touchstart', function (ev) {
	var $this = $(this),
	  scroller = $scrollContainer.get(0),
	  scrollTop,
	  scrollHeight,
	  offsetHeight,
	  contentHeight;
 
	if ($this.scrollTop() === 0) {
	  $this.scrollTop(1);
	}
	scrollTop = scroller.scrollTop;
	scrollHeight = scroller.scrollHeight;
	offsetHeight = scroller.offsetHeight;
	contentHeight = scrollHeight - offsetHeight;
	if (contentHeight === scrollTop) {
	  $this.scrollTop(scrollTop - 1);
	}
  });
});

4 thoughts on “How to fix getting stuck when scrolling up in Framework7

  1. don’t bind to touchstart,
    Because this can cause the user to want to click, the first click, the screen is shifted, and then click the event does not trigger.

    try bind to touchmove,I’ve tried it a long time ago.

  2. Booyoun says:

    I think it will be useful! However, I don’t know where is good place to paste your code. Could you explain it more?

  3. @Booyoun You can run your code when DOM tree is ready, so this would be a good place:

    $(document).ready(function () {
      // add code here
    });
    

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.