Disable Rubberband Scroll on Mobile while allowing scrollable Elements

Hello!
I am looking to disable Rubberband page Scrolling on mobile.
However, I want to make sure scrolling is enabled for all of the elements in the page.

This code (that I got from another related Hype Forum post) works great to prevent all scrolling:


var preventScroll = function (event) {
	event.stopPropagation();
	event.preventDefault();
}
var docElement = hypeDocument.getElementById(hypeDocument.documentId());

if(docElement.addEventListener) {
	docElement.addEventListener('touchmove', preventScroll, true);
}

But since it prevents all scrolling, this code won’t work for me.

How can I achieve a solution like this but in Hype? https://github.com/lazd/iNoBounce

How about including this as a feature for Hype Reflect?

Thanks so much!
Raleigh

iNoBounce is pretty nifty; you can get it to work with Hype documents. Here are the steps:

  1. Download the inobounce.js and include it Hype’s Resource Library
  2. Edit the Head HTML and include:
<script>
	function myCallback(hypeDocument, element, event) {
		var docElement = document.getElementById(hypeDocument.documentId());
		docElement.style["overflow"] = "auto";
		docElement.style["-webkit-overflow-scrolling"] = "touch";
	}

	if("HYPE_eventListeners" in window === false) {
		window.HYPE_eventListeners = Array();
	}
	window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>
4 Likes

Awesome, so cool to hear that iNoBounce can work with Hype!

Just to clarify:

I am confused when you say Inner HTML - I would have thought that I’d need to add this to the Head HTML in order to affect the entire page.
Do I need to add this to the Inner HTML of some page element(s)?

Just want to make sure I know where to put the code.

Many thanks for the help!

Whoops, that was a typo (fixed). Head HTML is correct.

Worked like a charm - thanks so much!

1 Like

The code above doesn’t work for me on iOS 10.3.2 on an iPad, at least not using Hype Reflect. Perhaps there was a change in iOS 10.3.2 that brakes this?

I found that putting this in the HTML header works:

    <script type="text/javascript">
        document.addEventListener('touchmove', function (event) {
	event.preventDefault();
}, false);
    </script>
1 Like

I use This script and it works nearly fine. But when the scrolling stops than stucks. I don´t know why…

 <script>
    	function myCallback(hypeDocument, element, event) {
    		var docElement = document.getElementById(hypeDocument.documentId());
    		docElement.style["overflow"] = "auto";
    		docElement.style["-webkit-overflow-scrolling"] = "touch";
    	}

    	if("HYPE_eventListeners" in window === false) {
    		window.HYPE_eventListeners = Array();
    	}
    	window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
    </script>

Unfortunately this script didn't appear to work for me on ipad OS 14.1, however the script Dan posted here works for me:

Just leaving this here in case it might help others :slight_smile:

2 Likes