Disable Elastic Scrolling in Mac OS X

1

Hi,

Is it possible to disable the elastic scrolling effect as seen in this picture with code?

2

Let’s keep the discussion to Hype. I think you’re looking for this thread: https://discussions.apple.com/thread/3224465

3

I meant disable it in all browsers, using Hype.

Anyway, in order to achieve this, you just need to add this CSS:

html {
			height:100%;
		}
		body {
			height:100%;
			width: 100%;
			overflow: hidden;
		}
4

It looks interesting but could you tell us how to implement this ?

5

So after you export the project as HTML you have to edit the HTML document, remove the margin and add overflow: hidden.

1 Like
6

If you add CSS in the ‘head’ area, it will override the properties which Hype adds since it loads after the initial Hype set of CSS styles. If you also need to remove the margin your code will be:

<style>
    html {
        height: 100%;
    }
    
    body {
        margin: none;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
</style>

You can edit the contents of the … of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

1 Like
7

If I edit the HTML Head inside Hype I can't see any style section. I can only see it after I export as HTML5 and then edit the html file.

8

That's true, but based on the way CSS works your CSS you add in the 'document head' editor will override any CSS that Hype writes out. You could edit either before or after, though your method will reduce the amount of CSS in your HTML file.

11

Hello everyone!

Is it also possible to disable the elastic scrolling effect only for one scene? I am using hype reflect on ipad and I am trying to create a litte drawing on canvas tool. The elastic scrolling effect makes it hard to draw something. But on the other hand i have scenes where scolling should be possible. Do you have any advice for me? Would help me a lot!

12

Found a solution!

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var drawing = false;

function startDraw(e) {
    drawing = true;
    context.beginPath();
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX ? e.clientX - rect.left : e.touches[0].clientX - rect.left;
    var y = e.clientY ? e.clientY - rect.top : e.touches[0].clientY - rect.top;
    context.moveTo(x, y);
}

function draw(e) {
    if (!drawing) return;
    e.preventDefault(); // Prevent scrolling when touching the canvas
    var rect = canvas.getBoundingClientRect();
    var x = e.clientX ? e.clientX - rect.left : e.touches[0].clientX - rect.left;
    var y = e.clientY ? e.clientY - rect.top : e.touches[0].clientY - rect.top;
    context.lineTo(x, y);
    context.strokeStyle = 'black';
    context.lineWidth = 5;
    context.stroke();
}

function endDraw() {
    drawing = false;
}

canvas.addEventListener('mousedown', startDraw);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', endDraw);

canvas.addEventListener('touchstart', startDraw);
canvas.addEventListener('touchmove', draw, { passive: false }); // Set the passive option to false to enable preventDefault()
canvas.addEventListener('touchend', endDraw);
2 Likes