콘텐츠가 오버플로되는 경우 overflowX를 사용한 해결 방법 속성을 사용하여 왼쪽/오른쪽 가장자리 문제를 해결하고 스크롤을 설정합니다. 스크롤을 추가하면 방문자가 전체 콘텐츠를 쉽게 읽을 수 있습니다.
예시
다음 코드를 실행하여 JavaScript를 사용한 오버플로에서 콘텐츠의 왼쪽/오른쪽 가장자리로 수행할 작업을 학습할 수 있습니다. −
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 350px;
height: 150px;
background-color: orange;
border: 3px solid red;
white-space: nowrap;
margin-left: 20px;
}
</style>
</head>
<body>
<p>Click to use overflow property and set scroll.</p>
<button type="button" onclick="display()">Set Scroll</button>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<br>
<script>
function display() {
document.getElementById("box").style.overflowX = "scroll";
}
</script>
</body>
</html>