질문자 :Oussama el Bachiri
전체 페이지를 스크롤할 수 있기를 원하지만 스크롤바가 표시되지 않습니다.
Chrome에서는 다음과 같습니다.
::-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: 0; /* 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; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .container::-webkit-scrollbar { display: none; /* Safari and Chrome */ } 이전 버전의 Firefox에서는 다음을 사용하세요. overflow: -moz-scrollbars-none;
업데이트:
Firefox는 이제 CSS로 스크롤 막대 숨기기를 지원하므로 이제 모든 주요 브라우저(Chrome, Firefox, Internet Explorer, Safari 등)가 지원됩니다.
스크롤바를 제거하려는 요소에 다음 CSS를 적용하기만 하면 됩니다.
.container { overflow-y: scroll; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 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 콘텐츠(향후 있을 경우)를 사용할 수 있습니다. 모든 브라우저는 해당 막대에 대해 서로 다른 특정 속성을 가질 수 있습니다.
Microsoft Edge 사용: -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>또한 모든 브라우저에서 스크롤 막대 없이 스크롤합니다.
CSS
.keep-scrolling { background-color: #eee; width: 200px; height: 100px; border: 1px dotted black; overflow-y: scroll; /* Add the ability to scroll y axis*/ } /* Hide scrollbar for Chrome, Safari and Opera */ .keep-scrolling::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .keep-scrolling { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }SCSS
.keep-scrolling { background-color: #eee; width: 200px; height: 100px; border: 1px dotted black; overflow-y: scroll; /* Add the ability to scroll y axis*/ /* Hide scrollbar for IE, Edge and Firefox */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ /* Hide scrollbar for Chrome, Safari and Opera */ &::-webkit-scrollbar { display: none; } }HTML
<div class="keep-scrolling"> </div>이것은 크로스 브라우저에서 작동합니다. 그러나 모바일 브라우저에서 기본 스크롤바를 숨기지는 않습니다.
SCSS에서
.hide-native-scrollbar { scrollbar-width: none; /* Firefox 64 */ -ms-overflow-style: none; /* Internet Explorer 11 */ &::-webkit-scrollbar { /** WebKit */ display: none; } }CSS에서
.hide-native-scrollbar { scrollbar-width: none; /* Firefox 64 */ -ms-overflow-style: none; /* Internet Explorer 11 */ } .hide-native-scrollbar::-webkit-scrollbar { /** WebKit */ display: none; }다음 세 줄만 사용하면 문제가 해결됩니다.
#liaddshapes::-webkit-scrollbar { width: 0 !important; }여기서 liaddshapes는 스크롤이 오는 div의 이름입니다.
스크롤바를 숨기지만 기능을 유지하려면 이것을 사용하십시오:
.example::-webkit-scrollbar { display: none; }IE, Edge 및 Firefox용 스크롤바 숨기기
.example { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }다음은 특정 div 요소에 대해 Microsoft, Chrome 및 Mozilla에서 저에게 효과적이었습니다.
div.rightsidebar { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } div.rightsidebar::-webkit-scrollbar { width: 0 !important; }2018년 12월 11일(Firefox 64 이상) 현재 Firefox 64+에서 CSS Scrollbar Styling 사양을 구현하므로 이 질문에 대한 답변은 매우 간단합니다.
다음 CSS를 사용하십시오.
scrollbar-width: none;Firefox 64 릴리스 노트 링크는 여기 .
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에서 테스트됨).
콘텐츠가 넘치는 요소의 스크롤 막대를 숨기려면 사용합니다.
.div{ scrollbar-width: none; /* The most elegant way for Firefox */ }사용하다:
#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>.className::-webkit-scrollbar{ display: none; }"오버플로"를 제외하고 작성하신 모든 것이 정확합니다. Chrome 및 기타 브라우저용 웹킷
overflow-y: scroll;또는
overflow-y: auto;Firefox 및 Edge의 경우
scrollbar-width: none;또는
scrollbar-width: thin; scrollbar-width: none;나를 위해 작동
사용하다
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에서 스크롤할 수 있지만 다른 브라우저는 확실하지 않습니다.
최신 브라우저에서는wheel event 사용할 수 있습니다.
// Content is the element you want to apply the wheel scroll effect to 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; });이것은 나를 위해 작동합니다.
scroll-content { overflow-x: hidden; overflow-y: scroll; } scroll-content::-webkit-scrollbar { width: 0; }이것이 내가 수평 스크롤을 수행하는 방법입니다. CSS만 가능하며 Bootstrap / col-*와 같은 프레임워크와 잘 작동합니다. width 또는 max-width 설정된 부모와 두 개의 추가 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>내 문제: 내 HTML 콘텐츠에 어떤 스타일도 원하지 않습니다. 내 몸을 스크롤 막대 없이 직접 스크롤할 수 있고 모든 화면 크기에 대해 CSS 그리드로 작업하는 세로 스크롤만 원합니다.
box-sizing 값은 패딩 또는 여백 솔루션에 영향을 미치며 box-sizing:content-box 와 함께 작동합니다.
여전히 "-moz-scrollbars-none" 지시문이 필요하고 gdoron 및 Mr_Green과 마찬가지로 스크롤바를 숨겨야 했습니다. -moz-transform 및 -moz-padding-start 시도했지만 너무 많은 작업이 필요한 반응형 부작용이 있었습니다.
이 솔루션은 "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; /* Internet Explorer 10+ */ overflow: -moz-scrollbars-none; /* Should hide the scroll bar */ } /* No scroll bar for Safari and Chrome */ html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; /* Might be enough */ 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; }현재 허용되는 답변에서와 같이 div 패딩을 추가하면 box-model: border-box 를 사용하려는 경우 작동하지 않습니다.
두 경우 모두 작동하는 것은 내부 div 의 너비를 100%에 스크롤 막대의 너비를 더한 값 overflow: hidden 이 외부 div에 있다고 가정).
예를 들어 CSS에서:
.container2 { width: calc(100% + 19px); }JavaScript에서 브라우저 간:
var child = document.getElementById('container2'); var addWidth = child.offsetWidth - child.clientWidth + "px"; child.style.width = 'calc(100% + ' + addWidth + ')';다음 SASS 스타일은 대부분의 브라우저에서 스크롤바를 투명하게 만들어야 합니다(Firefox는 지원되지 않음).
.hide-scrollbar { scrollbar-width: thin; scrollbar-color: transparent transparent; &::-webkit-scrollbar { width: 1px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: transparent; } }내 프로젝트에서 위의 솔루션을 시도하고 어떤 이유로 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; }이것은 그럼에도 불구하고 모든 브라우저에서 작동해야 하는 divitis-esque 솔루션입니다...
마크업은 다음과 같으며 상대적인 위치가 포함된 내부에 있어야 합니다(그리고 너비는 예를 들어 400픽셀로 설정되어야 함).
<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; }개발할 때 사용하는 스크롤바를 숨기기 위한 결합된 스니펫을 공유하고 싶었습니다. 그것은 나를 위해 작동하는 인터넷에서 찾은 여러 조각 모음입니다.
.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 */ }아래 코드를 사용하여 스크롤 막대를 숨길 수 있지만 여전히 스크롤할 수 있습니다.
.element::-webkit-scrollbar { width: 0 !important }또 다른 종류의 해키 접근 방식은 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' }); }); } 감지하고 해결하는 방법에 대해 좋은 기사 있습니다 onmousewheel 이벤트 deepmikoto의 블로그. 이것은 당신에게 도움이 될 수 있지만 확실히 우아한 솔루션은 아닙니다.
출처 : http:www.stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll
| Python 클래스가 객체를 상속하는 이유는 무엇입니까? (0) | 2022.03.17 |
|---|---|
| 치명적인 오류: Python.h: 해당 파일 또는 디렉터리가 없습니다. (0) | 2022.03.17 |
| 비트 시프트(비트 시프트) 연산자는 무엇이며 어떻게 작동합니까? (0) | 2022.03.17 |
| 모든 프로그래머가 읽어야 할 가장 영향력 있는 책은 무엇입니까? [닫은] (0) | 2022.03.17 |
| 컨테이너 너비에 따른 글꼴 크기 조정 (0) | 2022.03.17 |