CODEWITHSUNDEEP
htmlcssoverflow
lowercase
lowercase

Reputation: 1220

Html body overflow hidden with content scroll

I've got a css background animation set to overflow:hidden on the body tag (Codepen below).

body {
overflow: hidden;
}

I also have regular page content that I still need to scroll as usual.

The overflow:hidden on the body obviously prevents this. Is there any way to retain a regular scroll on my page content?

https://codepen.io/lowercase01/pen/GRrzQxG

Upvotes: 0

Views: 610

Answers (2)

Saeed Kohansal
Saeed Kohansal

Reputation: 111

How to hide scrollbar in browsers (Still scrollable)

/* Webkit */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox */
html {
  scrollbar-width: none;
}

Upvotes: 1

Zuko Mgwili
Zuko Mgwili

Reputation: 241

I have come up with a solution I think addresses the problem you are trying to solve. Following is a summary of what I have done. I have wrapped the .background div into what I've called the .background-container. I then have set the .background-container height to 0, removed the the overflow:hidden from the body and, then reordered the divs so that the .wrapper div comes last.

Here is a link to the codepen, https://codepen.io/zukomgwili/pen/GRrzQeY.

Upvotes: 1

Related Questions