Thuộc tính style overflowY trong HTML DOM

Thuộc tính style.overflowY trong HTML DOM trả về và cho phép thay đổi hành vi khi nội dung bên trong hộp phần tử tràn dọc (top/bottom) trong tài liệu HTML.

Cú pháp

Lấy giá trị overflowY

object.style.overflowY

Thay đổi overflowY

object.style.overflowY = "value"

Các giá trị

Giá trị có thể là:

Giá trị	Mô tả
scroll	Cắt nội dung và thêm thanh cuộn khi cần thiết.
inherit	Kế thừa giá trị từ phần tử cha.
initial	Đặt về giá trị mặc định.
auto	Tự động cắt nội dung và thêm thanh cuộn khi cần.
hidden	Ẩn nội dung tràn ra ngoài hộp phần tử.
visible	Không cắt nội dung, cho phép tràn ra ngoài hộp phần tử.

Ví dụ

Ví dụ sử dụng thuộc tính style.overflowY:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); height: 100vh; }
  p { border: 2px solid #fff; height: 100px; width: 200px; }
  .btn { background: coral; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin-top: 4rem; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style overflowY DOM</h1>
<p> Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. </p>
<button onclick="add()" class="btn">Thay đổi overflow</button>
<script>
  function add() {
    document.querySelector('p').style.overflowY = "scroll";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thay đổi overflow để áp dụng thuộc tính overflowY với giá trị scroll.