Properti style.overflow digunakan untuk menetapkan apa yang perlu dilakukan ketika isi telah melewati batas area suatu elemen.
Sintaks:
obj.style.overflow = value;
Nilainya:
visible(default)
Isi di dalam elemen tidak akan diclip dan untuk scrollbar-x dan scrollbar-y tidak akan ditambahkan.hidden
Isi di dalam elemen akan diclip dan untuk scrollbar-x dan scrollbar-y tidak akan ditambahkan.scroll
Isi di dalam elemen akan diclip bila diperlukan dan untuk scrollbar-x dan scrollbar-y akan selalu ditambahkan.auto
Isi di dalam elemen akan diclip dan untuk scrollbar-x atau scrollbar-y akan ditambahkan bila memang diperlukan.inherit
Untuk contohnya, jalankan program di bawah ini, lalu klik masing-masing tombol:
<HTML>
<BODY>
<DIV ID="x" STYLE="width: 150px; height: 100px; border: 2px solid;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque condimentum ultricies rutrum. Mauris vitae dolor a felis semper bibendum a vitae felis.</DIV>
<SCRIPT TYPE="text/javascript">
function visibleOverFlow()
{
document.getElementById("x").style.overflow = "visible";
}
function hiddenOverFlow()
{
document.getElementById("x").style.overflow = "hidden";
}
function scrollOverFlow()
{
document.getElementById("x").style.overflow = "scroll";
}
function autoOverFlow()
{
document.getElementById("x").style.overflow = "auto";
}
</SCRIPT>
<BUTTON TYPE="button" ONCLICK="visibleOverFlow()">Visible</BUTTON>
<BUTTON TYPE="button" ONCLICK="hiddenOverFlow()">Hidden</BUTTON>
<BUTTON TYPE="button" ONCLICK="scrollOverFlow()">Scroll</BUTTON>
<BUTTON TYPE="button" ONCLICK="autoOverFlow()">Auto</BUTTON>
</BODY>
</HTML>
</HTML>
