스크롤 막대를 숨기지 만 여전히 스크롤 할 수 있음
스크롤바를 표시하지 않고 전체 페이지를 스크롤 할 수 있기를 원합니다.
Google 크롬에서는 다음과 같습니다.
::-webkit-scrollbar {
display: none;
}
그러나 Mozilla Firefox와 Internet Explorer는 그렇게 작동하지 않는 것 같습니다.
나는 또한 이것을 CSS에서 시도했다.
overflow: hidden;
스크롤바가 숨겨 지지만 더 이상 스크롤 할 수 없습니다.
전체 페이지를 스크롤 할 수있는 동안 스크롤바를 제거 할 수있는 방법이 있습니까? CSS 또는 HTML 만 사용하십시오.
잘 작동하는 테스트입니다.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
자바 스크립트 :
스크롤바 너비는 브라우저마다 다르므로 JavaScript로 처리하는 것이 좋습니다. 하면 Element.offsetWidth - Element.clientWidth정확한 스크롤바 너비가 표시됩니다.
또는
사용하여 Position: absolute,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
정보 :
이 답변을 바탕으로 간단한 스크롤 플러그인을 만들었습니다 . 나는 이것이 누군가를 도울 수 있기를 바랍니다.
WebKit에서는 선택적인 스타일링을 사용하여 쉽습니다.
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
이것은 간단한 CSS 속성으로 나를 위해 작동합니다.
.container {
-ms-overflow-style: none; // IE 10+
scrollbar-width: none; // Firefox
}
.container::-webkit-scrollbar {
display: none; // Safari and Chrome
}
업데이트 :scrollbar-width Firefox 에 대한 새 속성이 추가되었습니다 .
이전 버전의 Firefox의 경우 다음을 사용하십시오. overflow: -moz-scrollbars-none;
업데이트 : Firefox는 이제 CSS로 스크롤바 숨기기를 지원하므로 모든 주요 브라우저 (Chrome, Firefox, IE, Safari 등)가 포함됩니다.
스크롤바를 제거하려는 요소에 다음 CSS를 적용하기 만하면됩니다.
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
이것은 내가 현재 알고있는 가장 덜 해킹 된 크로스 브라우저 솔루션입니다. 데모를 확인하십시오.
원래 답변 :
아직 언급되지 않은 또 다른 방법이 있습니다. 정말 간단하고 두 개의 div와 CSS 만 포함합니다. JavaScript 또는 독점 CSS가 필요하지 않으며 모든 브라우저에서 작동합니다. 컨테이너의 너비를 명시 적으로 설정할 필요가 없으므로 유동적으로 만듭니다.
이 메서드는 음의 여백을 사용하여 스크롤 막대를 부모 밖으로 이동 한 다음 동일한 양의 패딩을 사용하여 콘텐츠를 원래 위치로 다시 밀어 넣습니다. 이 기술은 수직, 수평 및 양방향 스크롤에 적용됩니다.
시민:
수직 버전의 예제 코드 :
HTML :
<div class="parent">
<div class="child">
Your content.
</div>
</div>
CSS :
.parent{
width: 400px;
height: 200px;
border: 1px solid #aaa;
overflow: hidden;
}
.child{
height: 100%;
margin-right: -50px; /* maximum width of scrollbar */
padding-right: 50px; /* maximum width of scrollbar */
overflow-y: scroll;
}
사용하다:
<div style='overflow:hidden; width:500px;'>
<div style='overflow:scroll; width:508px'>
My scroll-able area
</div>
</div>
이것은 스크롤바가없는 겹치는 div와 스크롤바를 다소 겹치는 트릭입니다.
::-webkit-scrollbar {
display: none;
}
이것은 WebKit 브라우저 전용입니다 ... 또는 브라우저 별 CSS 콘텐츠를 사용할 수 있습니다 (향후에있을 경우). 모든 브라우저는 각 막대에 대해 서로 다른 특정 속성을 가질 수 있습니다.
마이크로 소프트 에지 사용을 위해 : -ms-overflow-style: -ms-autohiding-scrollbar;나 -ms-overflow-style: none;같은 MSDN 당 .
Firefox에 해당하는 것은 없습니다. 이를 달성하기위한 jQuery 플러그인이 있지만 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
이 답변 에는 코드가 포함되어 있지 않으므로 다음은 페이지 의 솔루션입니다 .
페이지에 따르면이 접근 방식은 작동하기 위해 미리 스크롤바의 너비를 알 필요가 없으며 솔루션은 모든 브라우저에서도 작동하며 여기에서 볼 수 있습니다 .
좋은 점은 스크롤바를 숨기기 위해 패딩이나 너비 차이를 사용하지 않아도된다는 것입니다.
이것은 또한 줌 안전입니다. 패딩 / 너비 솔루션은 최소로 확대했을 때 스크롤바를 표시합니다.
Firefox 수정 : http://jsbin.com/mugiqoveko/1/edit?output
.element,
.outer-container {
width: 200px;
height: 200px;
}
.outer-container {
border: 5px solid purple;
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
display: none;
}<div class="outer-container">
<div class="inner-container">
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
</div>
</div>
</div>다음 세 줄을 사용하면 문제가 해결됩니다.
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
여기서 liaddshapes는 스크롤이 오는 div의 이름입니다.
다음은 특정 div 요소에 대해 Microsoft, Chrome 및 Mozilla에서 저를 위해 일했습니다.
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
HTML :
<div class="parent">
<div class="child">
</div>
</div>
CSS :
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}
그에 따라 CSS를 적용하십시오.
여기에서 확인 하십시오 (Internet Explorer 및 Firefox에서 테스트 됨).
2018 년 12 월 11 일 (Firefox 64 이상) 현재 Firefox 64 이상에서 CSS 스크롤바 스타일링 사양을 구현하므로이 질문에 대한 답은 매우 간단 합니다.
다음 CSS를 사용하십시오.
scrollbar-width: none;
Firefox 64 릴리스 노트 링크는 여기에 있습니다 .
사용하다:
#subparent{
overflow: hidden;
width: 500px;
border: 1px rgba(0,0,0,1.00) solid;
}
#parent{
width: 515px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
opacity: 10%;
}
#child{
width: 511px;
background-color: rgba(123, 8, 10, 0.42);
}
<body>
<div id="subparent">
<div id="parent">
<div id="child">
<!- code here for scroll ->
</div>
</div>
</div>
</body>
내 문제 : 나는 내 HTML에 어떤 스타일도 원하지 않고 스크롤바없이 내 몸을 직접 스크롤 할 수 있고 모든 화면 크기에 대해 CSS 그리드로 작업하는 수직 스크롤 만 원합니다.
상자 크기 조정 값에 미치는 영향 패딩이나 마진 솔루션, 그들은 함께 작동 컨텐츠 상자 : 상자 크기 조정 .
여전히 "-moz-scrollbars-none"지시문이 필요하고 gdoron 및 Mr_Green처럼 스크롤바를 숨겨야했습니다. -moz-transform 및 -moz-padding-start를 시도하여 firefox에만 영향을 주었지만 많은 작업이 필요한 반응 형 부작용이있었습니다.
이 솔루션은 "display : grid"스타일의 html 본문 내용에 대해 작동하며 반응이 좋습니다.
/* hide html and body scroll bar in css-grid context */
html,body{
position: static; /* or relative or fixed ... */
box-sizing: content-box; /* important for hidding scrollbar */
display: grid; /* for css-grid */
/* full screen */
width: 100vw;
min-width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
}
html{
-ms-overflow-style: none; /* IE 10+ */
overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
display: none; /* might be enought */
background: transparent;
visibility: hidden;
width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
/* Make html with overflow hidden */
html{
overflow: hidden;
}
/* Make body max height auto */
/* set right scroll bar out the screen */
body{
/* enable scrolling content */
max-height: auto;
/* 100vw +15px : trick to set the scroll bar out the screen */
width: calc(100vw + 15px);
min-width: calc(100vw + 15px);
max-width: calc(100vw + 15px);
/* set back the content inside the screen */
padding-right: 15px;
}
}
body{
/* allow vertical scroll */
overflow-y: scroll;
}
사용하다
function reloadScrollBars() {
document.documentElement.style.overflow = 'auto'; // Firefox, Chrome
document.body.scroll = "yes"; // Internet Explorer only
}
function unloadScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // Internet Explorer only
}
스크롤바를로드 또는 언로드하거나 다시로드하려는 지점에 대해이 함수를 호출하십시오. Chrome에서 테스트 했으므로 여전히 Chrome에서 스크롤 할 수 있지만 다른 브라우저는 확실하지 않습니다.
이것은 나를 위해 작동합니다.
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar{
width: 0;
}
최신 브라우저에서는 https://developer.mozilla.org/en-US/docs/Web/Events/wheel 을 사용할 수 있습니다.wheel event
// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
const step = 100; // how many pixels to scroll
if(e.deltaY > 0 ) // scroll down
content.scrollTop += step;
else //scroll up
content.scrollTop -= step;
});
div현재 허용되는 답변에서와 같이 inner에 패딩을 추가하면 어떤 이유로를 사용하려는 경우 작동하지 않습니다 box-model: border-box.
두 경우 모두 작동하는 것은 내부 너비 div를 100 % 더하기 스크롤바 너비로 늘리는 것입니다 ( overflow: hidden외부 div에서 가정 ).
예를 들어, CSS에서 :
.container2 {
width: calc(100% + 19px);
}
자바 스크립트에서 브라우저 간 :
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
이것이 내가 가로 스크롤에 대해 수행하는 방법이며 CSS 만 가능하며 부트 스트랩 / col- *와 같은 프레임 워크와 잘 작동합니다. 2 개의 추가 div와 너비 또는 최대 너비가 설정된 부모 만 필요합니다.
텍스트를 선택하여 스크롤하거나 터치 스크린이있는 경우 손가락으로 스크롤 할 수 있습니다.
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>게으른 사람들을위한 짧은 버전 :
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>이것은 브라우저 간 브라우저에서 작동하지만 모바일 브라우저에서 기본 스크롤바를 숨기지 않습니다.
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* IE 11 */
&::-webkit-scrollbar { /** Webkit */
display: none;
}
}
그럼에도 불구하고 모든 브라우저에서 작동해야하는 divitis-esque 솔루션입니다.
마크 업은 다음과 같으며 상대적 위치가있는 내부에 있어야합니다 (폭은 400px와 같이 설정되어야 함).
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>
CSS :
.hide-scrollbar {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.scrollbar {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: -50px;
bottom: 0;
}
.scrollbar-inner {
width: 400px;
}
perfect-scrollbar플러그인이 갈 길인 것 같습니다. https://github.com/noraesae/perfect-scrollbar를 참조하십시오.
스크롤바 문제에 대한 잘 문서화되고 완전한 JS 기반 솔루션입니다.
데모 페이지 : http://noraesae.github.io/perfect-scrollbar/
내 프로젝트에서 위의 솔루션을 시도하고 어떤 이유로 div 위치 지정으로 인해 스크롤 막대를 숨길 수 없었습니다. 따라서 스크롤 막대를 표면적으로 덮는 div를 도입하여 숨기기로 결정했습니다. 아래의 예는 가로 스크롤 막대에 대한 것입니다.
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>
해당 CSS는 다음과 같습니다.
#container{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#content{
width: 100%;
height: 100%;
overflow-x: scroll;
}
#scroll-cover{
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
background-color: #fff; /*change this to match color of page*/
}
이것은 신체에있을 것입니다.
<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>
그리고 이것은 CSS입니다.
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}
또 다른 종류의 해키 접근 방식은 overflow-y: hidden다음과 같이 요소를 수동으로 스크롤 한 다음 수동으로 스크롤하는 것입니다.
function detectMouseWheelDirection( e ) {
var delta = null, direction = false;
if ( !e ) { // if the event is not provided, we get it from the window object
e = window.event;
}
if ( e.wheelDelta ) { // will work in most cases
delta = e.wheelDelta / 60;
} else if ( e.detail ) { // fallback for Firefox
delta = -e.detail / 2;
}
if ( delta !== null ) {
direction = delta > 0 ? -200 : 200;
}
return direction;
}
if ( element.addEventListener ) {
element.addEventListener( 'DOMMouseScroll', function( e ) {
element.scrollBy({
top: detectMouseWheelDirection( e ),
left: 0,
behavior: 'smooth'
});
});
}
deepmikoto의 블로그에 onmousewheel이벤트 를 감지하고 처리하는 방법에 대한 훌륭한 기사가 있습니다. 이것은 당신에게 효과적 일 수 있지만 확실히 우아한 해결책은 아닙니다.
개발할 때 사용하는 스크롤바를 숨기기 위해 결합 된 스 니펫을 공유하고 싶었습니다. 그것은 나를 위해 작동하는 인터넷을 통해 발견 된 몇 가지 스 니펫 모음입니다.
.container {
overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
이 정보가 유용하기를 바랍니다. *
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
상위 컨테이너에는 오버플로가 숨겨져 있고 자식 컨테이너에서는 오버플로가 자동으로 표시됩니다. 단순한.
스크롤 숨기기 아래 코드를 사용할 수 있지만 여전히 스크롤 할 수 있습니다.
.element::-webkit-scrollbar { width: 0 !important }
자식 너비의 너비를 100 %로 설정하고 패딩을 15px로 설정하고 오버플로 -x를 스크롤하고 overflow : hidden을 부모 및 원하는 너비로 설정하면 IE8을 제외한 모든 주요 브라우저에서 완벽하게 작동합니다. 보다 낮은.
나는이 문제가 있었고 고치는 것은 매우 간단합니다.
두 개의 용기를 얻으십시오. 내부는 스크롤 가능한 컨테이너이고 외부는 분명히 내부를 수용합니다.
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
매우 간단하며 모든 브라우저에서 작동합니다.
가로 및 세로 스크롤 막대를 모두 숨 깁니다.
HTML
<div id="container1">
<div id="container2">
<pre>
Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
</pre>
</div>
<div>
CSS
* {
margin:0;
}
#container1 {
height: 50px;
width: 100%;
overflow: hidden;
position: relative;
}
#container2 {
position: absolute;
top: 0px;
bottom: -15px;
left: 0px;
right: -15px;
overflow: auto;
}
첨가
overflow: -moz-scrollbars-none;
나를 위해 일했습니다.
참고 URL : https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll
'Development Tip' 카테고리의 다른 글
| virtualenv와 함께 다른 Python 버전 사용 (0) | 2020.09.27 |
|---|---|
| C ++ 17의 새로운 기능은 무엇입니까? (0) | 2020.09.27 |
| 배열 배열 병합 / 편 평화 (0) | 2020.09.27 |
| 문자열에서 switch 문을 사용할 수없는 이유는 무엇입니까? (0) | 2020.09.27 |
| 이상한 언어 기능 (0) | 2020.09.27 |