No Scroll on HTML tag but Scroll Y on content

Question

I'm working on a wordpress template with tons of animation and I need to put an overflow hidden on the html tag but still be able to make the body tag scrollable on the Y axis.

On this website is doing exactly what i want to do : https://www.etq-amsterdam.com/

I'm looking for a way (jquery + css) to do the same thing but i can't figure it out.

Here's the basic stucture of my page:

<html>
    <body>
        <div class="content">
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>
    </body>
</html>

I tried this but it doesn't work:

<html style="overflow: hidden;">
    <body style="overflow-y: scroll;">
        <div class="content">
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>
    </body>
</html>

I think that like in the example i need to try a js or jquery solution.

The scroll bar will only become avalible if the height of content exceeds the height of the wrapper element (ie class="content") — Dacre Denny, Aug 13 '19 at 02:54

score 0 · Accepted Answer · answered Aug 13 '19 at 02:58

You would need to set the height on html and body to 100%.

html,
body {
  height: 100%;
}

.content {
  height: 5000px;
  background: linear-gradient(to bottom, pink, blue);
}


/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<html style="overflow: hidden;">

<body style="overflow-y: scroll;">
  <div class="content">
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </div>
</body>

</html>

No Scroll on HTML tag but Scroll Y on content

1 Answers1