How to make the contents of a fixed element scrollable only when it exceeds the height of the viewport with CSS?

Spread the love

Sometimes, we want to make the contents of a fixed element scrollable only when it exceeds the height of the viewport witrh CSS.

In this article, we’ll look at how to make the contents of a fixed element scrollable only when it exceeds the height of the viewport with CSS.

How to make the contents of a fixed element scrollable only when it exceeds the height of the viewport with CSS?

To make the contents of a fixed element scrollable only when it exceeds the height of the viewport witrh CSS, we set the overflow property.

For instance, we write

.stuck {
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 10px;
  width: 180px;
  overflow-y: scroll;
}

to add overflow-y: scroll; to make the element vertically scrollable.

Conclusion

To make the contents of a fixed element scrollable only when it exceeds the height of the viewport with CSS, we set the overflow property.

Leave a Reply

Your email address will not be published. Required fields are marked *