vertically scrolling web page using overflow style property

Question

I am trying to create a situation where I will scroll my web page with the use of an overflow property; if it overflows vertically, so I put my div tags in a parent div and set the overflow-y: scroll style property of the parent div tag but it’s not working. The parent div tag of my web page overflows vertically but it’s the browser scroll bar that is being used to scroll instead of the scroll bar I created for the div tag. The vertical scroll bar is not even showing to scroll, it just shows vertical bar line without the scroll bar in it

How can I make use of the scroll bar I created with the overflow style property?

Here is my full HTML and CSS

Accepted Answer

Hi @Donald Symmons,

You can turn off scrolling in your browser first.

 body {
        overflow: hidden;
    }

You need to specify the length and width to determine the extent of the overflow.

For example:

 .vertical-scroll {
            width:100%;
            height:600px;
            overflow-y: scroll;
        }

If you only need to use it on a small screen, you can use the following code:

body {
            overflow: hidden;
        }

        @media all and (max-width: 500px) {
            body {
                overflow-y: visible;
            }
        }

        @media all and (max-height: 500px) {
            body {
                overflow-y: visible;
            }
        }

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

vertically scrolling web page using overflow style property

0 additional answers