스크롤 막대를 숨기지 만 여전히 스크롤 할 수는 있지만

스크롤 막대가 표시되지 않고 전체 페이지를 스크롤 할 수 있기를 원합니다.

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: 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;  /* 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 컨텐츠를 사용할 수도 있습니다 (향후에있을 경우). 모든 브라우저는 각각의 막대에 대해 서로 다른 특성을 가질 수 있습니다.

마이크로 소프트 에지 사용을 위해 : -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의 이름입니다.

이것은 크로스 브라우저에서 작동합니다. 그러나 이것은 모바일 브라우저에서 기본 스크롤 막대를 숨기지 않습니다.

에서 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;
}

다음은 특정 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 Scrollbar Styling spec을 구현하므로이 질문에 대한 답변은 매우 간단 합니다.

다음 CSS를 사용하십시오.

scrollbar-width: none;

Firefox 64 릴리스 정보 링크는 여기를 클릭 하십시오 .

사용하다:

CSS

#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);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

사용하다

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;
}

최신 브라우저에서는 다음을 사용할 수 있습니다 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;
});

내 문제 : HTML 콘텐츠에 스타일을 원하지 않습니다. 스크롤 막대없이 화면을 직접 스크롤 할 수 있고 세로 스크롤 만 사용하여 모든 화면 크기의 CSS 그리드 로 작업하고 싶습니다 .

상자 크기 조정 값에 미치는 영향 패딩이나 마진 솔루션, 그들은 함께 작동 컨텐츠 상자 : 상자 크기 조정 .

여전히 "-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 + ')';

이것이 내가 수평 스크롤을 위해하는 방법입니다. CSS 만 있고 Bootstrap / col- *와 같은 프레임 워크와 잘 작동합니다. 두 개의 추가 만 필요 div하고 부모는 width또는 max-width세트가 필요합니다.

터치 스크린이있는 경우 텍스트를 선택하여 스크롤하거나 손가락으로 스크롤 할 수 있습니다.

.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>

내 프로젝트에서 위의 솔루션을 시도하고 어떤 이유로 div 배치로 인해 스크롤 막대를 숨길 수 없었습니다. 따라서 스크롤 막대를 표면적으로 덮는 div를 도입하여 스크롤 막대를 숨기기로 결정했습니다. 아래 예는 가로 스크롤 막대입니다.

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </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;
}

perfect-scrollbar플러그인이 길을 가야하는 것 같다, 참조 : https://github.com/noraesae/perfect-scrollbar

스크롤바 문제에 대해 잘 문서화되고 완전한 JavaScript 기반 솔루션입니다.

데모 페이지 : http://noraesae.github.io/perfect-scrollbar/

다음 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;
  }
}

해키 접근법의 또 다른 종류는 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 */
}

아래 코드를 사용하여 스크롤 막대를 숨길 수 있지만 여전히 스크롤 할 수는 있습니다.

.element::-webkit-scrollbar { 
    width: 0 !important 
}

넘친 컨텐츠가있는 요소의 스크롤 막대를 숨기려면 사용하십시오.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

또 다른 간단한 작업 바이올린 :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

부모 컨테이너에 오버플로가 숨겨지고 자식 컨테이너에 오버플로가 자동으로 나타납니다. 단순한.

이 까다로운 솔루션 은 오래된 IE 웹 브라우저에서도 작동합니다.

[ 수직 스크롤바 ] 의 해결 방법입니다 .

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

그냥 시도해보십시오 : jsfiddle

자녀 너비의 너비를 100 %로 설정하고 패딩을 15 픽셀로 설정하면됩니다. overflow-x 하고 스크롤 overflow:hidden하여 부모 및 원하는 너비를 설정하십시오.

Internet Explorer 8 이하를 제외하고 Internet Explorer 및 Edge를 포함한 모든 주요 브라우저에서 완벽하게 작동합니다.