Mobile devices scrolling below site

Question

My website is scrolling below the html tags when I scroll on mobile devices. I tried some stuff that I found like hiding overflows and setting position relative on the body but nothing of it is working.

code:

html {
    overflow: hidden;
    height: 100%;
    width: 725%; }

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin: 0 0 30px;
    position: relative; }

If you are on google chrome you can also visit www.winkelmand.nl to try it out by putting your browser in some sort of mobile form with Chrome devtools.

Notice you can scroll off the page when scrolling down.

Extra
I would also like to disable horizontal scrolling without losing the content on the side of the page.

Answer 1

Maybe you mean the default scolliny behavior option, that recently got added in Chrome 63. Here is an atricle

body {
  overscroll-behavior-y: contain;
}

Answer 2

You can disable the horizontal bar using below :

html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

and yes as @Jiib stated overscroll-behavior

Answer 3

For some reason adding user-scalable=no in my viewport did the job. I am still able to scroll but it wont let me scroll off page.

First:
<meta name="viewport" content="width=device-width, initial-scale=1.0" >

Now:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" >

I don't exactly know how this works but it does, still thanks for the answers tho, I didn't know about overscroll-behavior-y: contain; and I think it can become usefull.