overflow-y

The overflow-y CSS property specifies the handling of overflow in the vertical direction.

Syntax

CSS

overflow-y: value;

JS

object.style.overflowY = "value";

Values

<'overflow-y'> = visible | hidden | clip | scroll | auto

visible

There is no special handling of overflow, the box's content is rendered outside the box if positioned there.

hidden

The box's content is clipped to its padding box and the UA must not provide any scrolling user interface to view the content outside the clipping region, nor allow scrolling by direct intervention of the user.

clip

Like hidden, but also forbids scrolling.

scroll

Indicates that the content is clipped to the padding box, but can be scrolled into view.

auto

Automatically specified by the user agent.

Initial

visible

Examples

1 · auto

2 · clip

3 · hidden

4 · scroll

5 · visible

6 · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        blockquote
        {
            border-style: dashed;
            border-width: thin;
            margin-left: 50px;
            margin-top: 50px;
            width: 150px;
        }
        cite
        {
            display: block;
            text-align: right;
        }
        div
        {
            border-color: red;
            border-style: solid;
            border-width: thin;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">auto</button>
    <button onmouseover="myfunction(innerHTML)">clip</button>
    <button onmouseover="myfunction(innerHTML)">hidden</button>
    <button onmouseover="myfunction(innerHTML)">scroll</button>
    <button onmouseover="myfunction(innerHTML)">visible</button>
    <div>
        <blockquote>
            <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
            <cite>Groucho Marx</cite>
        </blockquote>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.overflowY = myparameter;
        }
    </script>
</body>
</html>

7 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        blockquote
        {
            border-style: dashed;
            border-width: thin;
            margin-left: 50px;
            margin-top: 50px;
            width: 150px;
        }
        cite
        {
            display: block;
            text-align: right;
        }
        div
        {
            border-color: red;
            border-style: solid;
            border-width: thin;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>clip</button>
    <button>hidden</button>
    <button>scroll</button>
    <button>visible</button>
    <div>
        <blockquote>
            <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
            <cite>Groucho Marx</cite>
        </blockquote>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.overflowY = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction( myelement.innerHTML)});
        }
    </script>
</body>
</html>