programing tip

브라우저에서 항상 수직 스크롤바를 표시하는 방법은 무엇입니까?

itbloger 2020. 11. 26. 07:57
반응형

브라우저에서 항상 수직 스크롤바를 표시하는 방법은 무엇입니까?


웹 페이지에 항상 세로 스크롤바를 표시하고 싶습니다. 자바 스크립트를 사용할 수 있습니까? 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

반응형