overflow

Overview

W3C

Properties

background

background-attachment

The overflow property specifies whether content of a block-level element is clipped when it overflows the element's box.

CSS2


                                overflow: visible | hidden | scroll | auto | inherit

Initial:	visible
Applies To:	non-replaced block-level elements, table cells, and inline-block elements
Inherited:	no
Percentages:	NA
Media:	visual

DOM
Example | auto
Example | hidden
Example | scroll
Example | visible
Example | DOM
Reference


                                [window.]document.getElementById("element-id").style.overflow = "overflow";

<!doctype html>
<html>
  <head>
    <title>overflow</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">visible</a>
    <a href="/" onmouseover="mouseover2();">hidden</a>
    <a href="/" onmouseover="mouseover3();">scroll</a>
    <a href="/" onmouseover="mouseover4();">auto</a><br>
    <div id="id1">
      <blockquote id="id2">
        <p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
        <cite id="id3">- Groucho Marx</cite>
      </blockquote>
    </div>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.overflow = "visible";
    }
    function mouseover2() {
      document.getElementById("id1").style.overflow = "hidden";
    }
    function mouseover3() {
      document.getElementById("id1").style.overflow = "scroll";
    }
    function mouseover4() {
      document.getElementById("id1").style.overflow = "auto";
    }
    document.getElementById("id1").style.border     = "thin solid red";
    document.getElementById("id1").style.height     = "100px";
    document.getElementById("id1").style.width      = "100px";
    document.getElementById("id2").style.border     = "thin dashed black";
    document.getElementById("id2").style.marginLeft = "50px";
    document.getElementById("id2").style.marginTop  = "50px";
    document.getElementById("id2").style.width      = "125px";
    document.getElementById("id3").style.display    = "block";
    document.getElementById("id3").style.textAlign  = "right";
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

DOM

Example | auto

Example | hidden

Example | scroll

Example | visible

Example | DOM

Reference