스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

codememo

스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

tipmemo 2023. 4. 8. 08:32

스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

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

Google 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:

스크롤바 폭은 브라우저마다 다르므로 JavaScript로 처리하는 것이 좋습니다. 하면.Element.offsetWidth - Element.clientWidth정확한 스크롤바 너비가 표시됩니다.

JavaScript 작동 바이올린

또는

「」를 사용합니다.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;
}

현용 바이올린

JavaScript 작동 바이올린

정보:

이 답변을 바탕으로 간단한 스크롤 플러그인을 만들었습니다.

이것은 간단한 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;

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를 사용한 스크롤바 숨김을 지원하므로 모든 주요 브라우저(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 ™ 경 microsoft :-ms-overflow-style: -ms-autohiding-scrollbar; ★★★★★★★★★★★★★★★★★」-ms-overflow-style: none;MSDN에 준거하고 있습니다.

Firefox에는 동등한 것이 없습니다.이를 실현하기 위한 jQuery 플러그인이 있지만 http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

또한 모든 브라우저에서 스크롤 바를 사용하지 않고 스크롤할 수 있습니다.

CSS

.keep-scrolling {
  background-color: #EEE;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll the y axis */
}

/* Hide the scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
  display: none;
}

/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
  -ms-overflow-style: none;  /* Internet Explorer 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 the y axis */

    /* Hide the scrollbar for Internet Explorer, Edge and Firefox */
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */

    /* Hide the scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
       display: none;
    }
}

HTML

<div class="keep-scrolling">
</div>

스크롤 막대를 숨기지만 기능은 유지하려면 다음과 같이 하십시오.

.example::-webkit-scrollbar {
  display: none;
}

IE, Edge 및 Firefox 스크롤바 숨기기

.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

이 답변에는 코드가 포함되어 있지 않습니다.다음 페이지의 솔루션을 나타냅니다.

페이지에 의하면, 이 어프로치는, 스크롤바의 폭을 미리 알 필요는 없습니다.해당 솔루션은 모든 브라우저에서도 동작합니다.여기서 보실 수 있습니다.

좋은 점은 스크롤 바를 숨기기 위해 패딩이나 폭 차이를 사용하지 않아도 된다는 것입니다.

이것도 줌 세이프입니다.패딩/폭 솔루션은 최소로 확대했을 때 스크롤 막대를 표시합니다.

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>

다음 3행만 사용하면 문제가 해결됩니다.

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

여기서 liadsshapes는 스크롤이 오는 디바의 이름입니다.

크로스브라우저에게 이 정도면 되겠네요.단, 모바일브라우저에서는 네이티브스크롤바를 숨기지 않습니다.

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

다음 코드를 적어주세요.

::-webkit-scrollbar {
  width: 0px;
}

또는

::-webkit-scrollbar {
  display: none;
}

이건 내게 효과가 있었다.

div {
  -ms-overflow-style: none; /* Edge, Internet Explorer */
  scrollbar-width: none; /* Firefox */
  overflow-y: scroll;
}

// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

scrollbar-width: none;

잘 먹히네요.

Microsoft, Chrome 및 Mozilla에서 특정 div 요소에 대해 다음과 같은 작업을 수행했습니다.

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

.className::-webkit-scrollbar{
    display: none;
}

Chrome 및 기타 브라우저용 웹킷인 "오버플로우"를 제외한 모든 내용이 정확합니다.

overflow-y: scroll;

또는

overflow-y: auto;

파이어폭스 및 엣지용

scrollbar-width: none;

또는

scrollbar-width: thin;

2018년 12월 11일(Firefox 64 이상) 현재 Firefox 64+는 CSS Scrollbar Styling 사양을 구현하고 있으므로 이 질문에 대한 답은 매우 간단합니다.

다음 CSS를 사용합니다.

scrollbar-width: none;

Firefox 64 릴리즈 노트 링크는 이쪽입니다.

내용이 넘쳐나는 요소의 스크롤 막대를 숨기려면 다음과 같이 하십시오.

.div{

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

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에서 테스트됨).

최신 브라우저에서는 다음을 사용할 수 있습니다.

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

사용하다

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에서도 스크롤이 가능하지만 다른 브라우저는 잘 모르겠습니다.

용도:

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>

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

이것으로 충분합니다.

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

가로 스크롤에서는 이렇게 하고 있습니다.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>

문제: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;
}

.your-overflow-scroll-class::-webkit-scrollbar {
  ...
  width: 0.5rem; //only hide the vertical scrollbar
  height: 0px; //only hide the horizontal scrollbar
}

다음은 본문에 표시됩니다.

<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>
</div>

CSS는 다음과 같습니다.

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height: 500px;
}

내부 패딩 추가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 + ')';

아래 코드를 사용하여 스크롤 막대를 숨길 수 있지만 스크롤은 가능합니다.

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

저는 우연히 제 프로젝트에서 위의 솔루션을 시도했는데, 어떤 이유에서인지 div positioning으로 인해 스크롤 바를 숨길 수 없었습니다.그래서 나는 스크롤 바를 표면적으로 덮는 디바이를 도입하여 숨기기로 했다.다음은 수평 스크롤 막대의 예입니다.

<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*/
}

언급URL : https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

'codememo' 카테고리의 다른 글

종속성 속성 SetValue()와 SetCurrentValue()의 차이점은 무엇입니까? (0)	2023.04.13
클러스터된 인덱스와 비클러스터된 인덱스의 차이점은 무엇입니까? (0)	2023.04.08
Powershell ISE에서 스크립트에 필요한 파라미터를 전달하려면 어떻게 해야 합니까? (0)	2023.04.08
CSS를 사용하여 체크박스를 스타일링하는 방법 (0)	2023.04.08
PowerShell에서 "백업" 컨텍스트를 사용하여 섀도 복사본 생성 (0)	2023.04.08

현재글스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

각종 프로그래밍 정보를 다루는 블로그입니다.

Oracle, ReactJS, asp.net, PYTHON, json, wordpress, MariaDB, PowerShell, spring, ajax, Angular, Excel, spring-boot, mongodb, sql-server, bash, Git, jQuery, C, angularJS,

Today :
Yesterday :

tipmemo

스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

JavaScript:

또는

정보:

CSS

SCSS

HTML

CSS

HTML

'codememo' 카테고리의 다른 글

'codememo'의 다른글

티스토리툴바

« 2026/02 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

스크롤 막대를 숨길 수 있지만 스크롤할 수 있음

JavaScript:

또는

정보:

CSS

SCSS

HTML

CSS

HTML

'codememo' 카테고리의 다른 글

'codememo'의 다른글

관련글

티스토리툴바