브라우저에서 항상 수직 스크롤바를 표시하는 방법은 무엇입니까?
웹 페이지에 항상 세로 스크롤바를 표시하고 싶습니다. 자바 스크립트를 사용할 수 있습니까? javascript 또는 jQuery를 사용하는 것이 가능하다고 생각합니다. 표시 할 콘텐츠가 충분한 지 여부에 관계없이 세로 스크롤바를 원합니다.
감사.
jQuery는 필요하지 않습니다. CSS를 추가해 볼 수 있습니다.
body {overflow-y:scroll;}
이것은 최신 브라우저, 심지어 IE6에서도 작동합니다.
참고 사항 : OS X Lion에서 "스크롤"로 설정된 오버플로는 스크롤바가 사용될 때만 표시된다는 점에서 자동처럼 작동합니다. 사용하지 않으면 사라집니다. 따라서 위의 솔루션이 작동하지 않는 것 같으면 그 이유 일 수 있습니다.
이 문제를 해결하려면 다음이 필요합니다.
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
그에 따라 스타일을 지정할 수 있습니다.
CSS를 사용하십시오.
body {
overflow-y: scroll;
}
설정된 overflow
속성 함유 div
으로이 scroll
.
body 태그의 onload 메서드에 대한 함수를 호출하고 해당 함수에서이 document.body.style.overflow = 'scroll'과 같이 본문 스타일을 변경합니다. 또한 가로 스크롤 막대도 표시되므로 html의 너비를 설정해야 할 수도 있습니다.
HTML 파일은 다음과 같습니다.
<script language="javascript">
function showscroll() {
document.body.style.overflow = 'scroll';
}
</script>
</head>
<body onload="showscroll()">
// Nothing to show here
body {
height: 150vh;
}
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, .6);
}
/* Of course you can style it even more */
<h1 style="margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: Helvetica, Arial, sans-serif;">Scroll</h1>
여기에 방법이 있습니다. 이것은 스크롤바 컨테이너를 제공 할뿐만 아니라 콘텐츠가 충분하지 않은 경우에도 스크롤바를 표시합니다 (요구 사항에 따라). 아이폰과 안드로이드 기기에서도 작동합니다 ..
<style>
.scrollholder {
position: relative;
width: 310px; height: 350px;
overflow: auto;
z-index: 1;
}
</style>
<script>
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
function touchScroll(id) {
if (isTouchDevice()) { //if touch events exist...
var el = document.getElementById(id);
var scrollStartPos = 0;
document.getElementById(id).addEventListener("touchstart", function (event) {
scrollStartPos = this.scrollTop + event.touches[0].pageY;
event.preventDefault();
}, false);
document.getElementById(id).addEventListener("touchmove", function (event) {
this.scrollTop = scrollStartPos - event.touches[0].pageY;
event.preventDefault();
}, false);
}
}
</script>
<body onload="touchScroll('scrollMe')">
<!-- title -->
<!-- <div class="title" onselectstart="return false">Alarms</div> -->
<div class="scrollholder" id="scrollMe">
</div>
</body>
스크롤 할 수 있도록하려는 div에 클래스를 추가합니다.
overflow-x : 숨김; 수평 스크롤바를 숨 깁니다. 오버 플로우 -y 동안 : 스크롤; 수직으로 스크롤 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="scroll"><h1> DATA </h1></div>
참고 URL : https://stackoverflow.com/questions/4050076/how-to-always-show-the-vertical-scrollbar-in-a-browser
'programing tip' 카테고리의 다른 글
부트 스트랩 모달이 표시 / 숨겨져 있는지 확인할 수 있습니까? (0) | 2020.11.26 |
---|---|
ios 사용법 설명에 대한 edit-config : doc.find는 함수가 아닙니다. (0) | 2020.11.26 |
AngularJS를 사용하여 JSON 피드에서 선택 드롭 다운 목록을 어떻게 채울 수 있습니까? (0) | 2020.11.26 |
2015 년 4 월 20 일 이후 (v3 API없이) Youtube 채널 RSS 피드를받는 방법은 무엇입니까? (0) | 2020.11.26 |
Xcode의 디버그 콘솔 출력에서 자동 레이아웃 제약 조건 오류 메시지 비활성화 (0) | 2020.11.26 |