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?


Position fixed detail issue đŸ¤”
Disable Scroll Direction?
Scene bouncing up and down on iPad
#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;
		}

(kerguelen) #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.


#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.


#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.