JavaScript에서 스크롤 가능한 div
Anika Tabassum Era
2024년2월15일
JavaScript에서는 인터페이스를 개선하는 특정 이벤트를 조작할 수 있습니다. 종종 일부 CSS 속성의 성능은 JavaScript 구현으로 설명할 수 있습니다.
CSS의 overflow-x와 마찬가지로 JavaScript에서 overflowX와 동일한 작업을 수행할 수 있습니다.
우리의 임무는 div 요소를 스크롤 가능하게 만드는 것입니다. 우리는 offsetHeight/Width 또는 콘텐츠의 기본 높이 너비에 초점을 맞추지 않을 것입니다. 오히려 정적 크기로 div를 설정합니다.
그러나 내용의 길이는 가변적일 수 있습니다. overflow와 overflowX 및 overflowY의 사용을 다루는 두 가지 예를 볼 것입니다.
코드를 확인해보자.
overflow 속성을 사용하여 JavaScript에서 div 요소 스크롤
값 auto에 대한 overflow 속성은 컨텐츠가 div 크기보다 큰 경우 자동으로 수직 스크롤바를 생성합니다. 이 속성은 스크롤 가능한 div 요소를 만드는 경우를 해결합니다.
다음 코드 라인에서 데모가 제공됩니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
<style>
div{
background: powderblue;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflow = 'auto';
</script>
</body>
</html>
출력:
overflowX 및 overflowY 속성을 사용하여 JavaScript에서 div 요소 스크롤
이러한 속성 집합에 따라 x-axis 스크롤 막대를 none으로 설정합니다. 따라서 세로 스크롤 막대는 overflowY 값을 auto로 설정합니다.
결과적으로 컨텐츠가 div보다 커지면 스크롤바가 나타나고 작동합니다. 코드 펜스는 더 나은 미리보기를 제공합니다.
코드 조각:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div{
background: lavender;
}
#scroll{
height:100px;
width: 200px;
}
</style>
</head>
<body>
<div id="scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis reprehenderit earum, rem tenetur quaerat, ab, nostrum ducimus totam quis natus placeat eos vitae? Sint eos, ab eum repellendus ex praesentium.</p>
</div>
<script>
document.getElementById('scroll').style.overflowX='none';
document.getElementById('scroll').style.overflowY='auto';
</script>
</body>
</html>
출력:
