Ẩn thanh cuộn, nhưng trong khi vẫn có thể cuộn

Tôi muốn có thể cuộn qua toàn bộ trang, nhưng không hiển thị thanh cuộn.

Trong Google Chrome, nó:

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

Nhưng Mozilla Firefox và Internet Explorer dường như không hoạt động như vậy.

Tôi cũng đã thử điều này trong CSS:

overflow: hidden;

Điều đó không ẩn thanh cuộn, nhưng tôi không thể cuộn nữa.

Có cách nào để tôi có thể gỡ bỏ thanh cuộn trong khi vẫn có thể cuộn toàn bộ trang không?

Chỉ với CSS hoặc HTML, xin vui lòng.

Chỉ cần một bài kiểm tra đang hoạt động tốt.

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

Fiddle làm việc

JavaScript:

Vì chiều rộng của thanh cuộn khác nhau trong các trình duyệt khác nhau, tốt hơn là xử lý nó bằng JavaScript. Nếu bạn làm như vậy Element.offsetWidth - Element.clientWidth, chiều rộng thanh cuộn chính xác sẽ hiển thị.

Fiddle làm việc JavaScript

Hoặc là

Sử dụng 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;
}

Fiddle làm việc

Fiddle làm việc JavaScript

Thông tin:

Dựa trên câu trả lời này, tôi đã tạo ra một plugin cuộn đơn giản .

Thật dễ dàng trong WebKit, với kiểu dáng tùy chọn:

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

Điều này làm việc với tôi với các thuộc tính CSS đơn giản:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Đối với các phiên bản Firefox cũ hơn, hãy sử dụng: overflow: -moz-scrollbars-none;

CẬP NHẬT:

Firefox hiện hỗ trợ ẩn thanh cuộn bằng CSS, vì vậy tất cả các trình duyệt chính hiện đã được trình bày (Chrome, Firefox, Internet Explorer, Safari, v.v.).

Chỉ cần áp dụng CSS sau đây cho phần tử bạn muốn xóa thanh cuộn khỏi:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Đây là giải pháp trình duyệt chéo ít hack nhất mà tôi hiện đang biết. Kiểm tra bản demo.

TRẢ LỜI GỐC:

Đây là một cách khác chưa được đề cập. Nó thực sự đơn giản và chỉ liên quan đến hai div và CSS. Không cần JavaScript hoặc CSS độc quyền và nó hoạt động trong tất cả các trình duyệt. Nó không yêu cầu thiết lập rõ ràng chiều rộng của thùng chứa, do đó làm cho nó lỏng.

Phương pháp này sử dụng lề âm để di chuyển thanh cuộn ra khỏi cha mẹ và sau đó cùng một lượng đệm để đẩy nội dung trở về vị trí ban đầu. Kỹ thuật này hoạt động cho cuộn dọc, ngang và cuộn hai chiều.

Bản trình diễn:

• Theo chiều dọc
• Ngang
• Cả hai hướng

Mã ví dụ cho phiên bản dọc:

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

Sử dụng:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Đây là một mẹo để phần nào trùng lặp thanh cuộn với một div chồng chéo mà không có bất kỳ thanh cuộn nào:

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

Điều này chỉ dành cho trình duyệt WebKit ... Hoặc bạn có thể sử dụng nội dung CSS dành riêng cho trình duyệt (nếu có trong tương lai). Mỗi trình duyệt có thể có một thuộc tính cụ thể và khác nhau cho các thanh tương ứng của chúng.

Đối với Microsoft Edge sử dụng: -ms-overflow-style: -ms-autohiding-scrollbar;hoặc -ms-overflow-style: none;như mỗi MSDN .

Không có tương đương với Firefox. Mặc dù có một plugin jQuery để đạt được điều này, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Câu trả lời này không bao gồm mã, vì vậy đây là giải pháp từ trang :

Theo trang, cách tiếp cận này không cần biết chiều rộng của thanh cuộn trước thời gian để hoạt động và giải pháp cũng hoạt động cho tất cả các trình duyệt, và có thể xem tại đây .

Điều tốt là bạn không bị buộc phải sử dụng phần đệm hoặc chênh lệch chiều rộng để ẩn thanh cuộn.

Đây cũng là zoom an toàn. Các giải pháp đệm / chiều rộng hiển thị thanh cuộn khi thu phóng đến mức tối thiểu.

Sửa lỗi 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>

Chỉ cần sử dụng ba dòng sau và vấn đề của bạn sẽ được giải quyết:

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

Trong đó liaddshapes là tên của div nơi cuộn đến.

Điều này làm việc cho tôi trình duyệt chéo. Tuy nhiên, điều này không ẩn các thanh cuộn gốc trên các trình duyệt di động.

Trong SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

Trong CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Phần sau đây hoạt động với tôi trên Microsoft, Chrome và Mozilla cho một yếu tố div cụ thể:

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

Áp dụng CSS phù hợp.

Kiểm tra nó ở đây (được thử nghiệm trong Internet Explorer và Firefox).

Kể từ ngày 11 tháng 12 năm 2018 (Firefox 64 trở lên), câu trả lời cho câu hỏi này thực sự rất đơn giản vì Firefox 64+ hiện thực hiện thông số Kiểu dáng Thanh cuộn CSS .

Chỉ cần sử dụng CSS sau đây:

scrollbar-width: none;

Liên kết ghi chú phát hành Firefox 64 tại đây .

Sử dụng:

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>

Sử dụng

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
}

Gọi các hàm này cho bất kỳ điểm nào bạn muốn tải hoặc dỡ hoặc tải lại thanh cuộn. Nó vẫn có thể cuộn trong Chrome khi tôi đã thử nghiệm nó trong Chrome, nhưng tôi không chắc về các trình duyệt khác.

Điều này làm việc cho tôi:

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

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

Trên các trình duyệt hiện đại, bạn có thể sử dụng 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;
});

Vấn đề của tôi: Tôi không muốn bất kỳ phong cách nào trong nội dung HTML của mình. Tôi muốn cơ thể của mình có thể cuộn trực tiếp mà không cần bất kỳ thanh cuộn nào và chỉ có một cuộn dọc, hoạt động với các lưới CSS cho bất kỳ kích thước màn hình nào.

Các giải pháp đệm tác động giá trị kích thước hộp hoặc các giải pháp lề, chúng hoạt động với kích thước hộp: hộp nội dung .

Tôi vẫn cần chỉ thị "-moz-scrollbars-none", và như gdoron và Mr_Green, tôi phải ẩn thanh cuộn. Tôi đã thử -moz-transformvà -moz-padding-start, chỉ tác động đến Firefox, nhưng có những tác dụng phụ nhạy cảm cần quá nhiều công việc.

Giải pháp này hoạt động cho nội dung thân HTML với kiểu "display: Grid" và nó rất nhạy.

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

Thêm phần đệm vào bên trong div, như trong câu trả lời hiện được chấp nhận, sẽ không hoạt động nếu vì lý do nào đó bạn muốn sử dụng box-model: border-box.

Điều gì làm việc trong cả hai trường hợp là tăng chiều rộng của bên trong divlên 100% cộng với chiều rộng của thanh cuộn (giả sử overflow: hiddentrên div bên ngoài).

Ví dụ: trong CSS:

.container2 {
    width: calc(100% + 19px);
}

Trong JavaScript, trình duyệt chéo:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

Đây là cách tôi làm cho cuộn ngang; chỉ CSS và hoạt động tốt với các khung như Bootstrap / col- *. Nó chỉ cần thêm hai divs và cha mẹ với một widthhoặc một max-widthbộ:

Bạn có thể chọn văn bản để làm cho nó cuộn hoặc cuộn nó bằng ngón tay nếu bạn có màn hình cảm ứng.

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

Phiên bản ngắn dành cho người lười biếng:

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

Kiểu SASS sau sẽ làm cho thanh cuộn của bạn trong suốt trên hầu hết các trình duyệt (Firefox không được hỗ trợ):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Tôi tình cờ thử các giải pháp trên trong dự án của mình và vì một số lý do tôi không thể ẩn thanh cuộn do định vị div. Do đó, tôi quyết định ẩn thanh cuộn bằng cách giới thiệu một div bao phủ nó một cách hời hợt. Ví dụ dưới đây dành cho thanh cuộn ngang:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

CSS tương ứng như sau:

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

Điều này sẽ ở cơ thể:

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

Và đây là CSS:

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

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

Đây là một giải pháp siêu viêm mà không cần làm việc cho tất cả các trình duyệt ...

Đánh dấu như sau và cần phải ở trong một cái gì đó có định vị tương đối (và chiều rộng của nó phải được đặt, ví dụ 400 pixel):

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

Các perfect-scrollbarPlugin có vẻ là con đường để đi, xem: https://github.com/noraesae/perfect-scrollbar

Đây là một giải pháp dựa trên JavaScript được tài liệu tốt và đầy đủ cho vấn đề thanh cuộn.

Trang demo: http://noraesae.github.io/perinf-scrollbar/

Bạn có thể sử dụng mã bên dưới để ẩn thanh cuộn, nhưng trong khi vẫn có thể cuộn:

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

Một cách tiếp cận hacky khác là làm overflow-y: hiddenvà sau đó cuộn thủ công phần tử với thứ như thế này:

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

Có một bài viết tuyệt vời về cách phát hiện và xử lý onmousewheelcác sự kiện trong blog của deepmikoto . Điều này có thể làm việc cho bạn, nhưng nó chắc chắn không phải là một giải pháp thanh lịch.

Tôi chỉ muốn chia sẻ một đoạn kết hợp để ẩn thanh cuộn mà tôi sử dụng khi phát triển. Nó là một tập hợp của một số đoạn được tìm thấy trên Internet phù hợp với tôi:

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

Để ẩn các thanh cuộn cho các thành phần có sử dụng nội dung tràn.

.div{

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

}    

Một bí quyết làm việc đơn giản khác :

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

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

Tràn ẩn trên bộ chứa cha mẹ và tự động tràn trên bộ chứa con. Đơn giản.

Giải pháp phức tạp này hoạt động ngay cả trên trình duyệt web IE cũ

Đó là một cách giải quyết cho [ thanh cuộn dọc ]

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

Hãy thử nó: jsfiddle

Chỉ cần đặt chiều rộng của chiều rộng của trẻ em thành 100%, đệm thành 15 pixel, overflow-xđể cuộn và overflow:hiddencho cha mẹ và bất kỳ chiều rộng nào bạn muốn.

Nó hoạt động hoàn hảo trên tất cả các trình duyệt chính, bao gồm Internet Explorer và Edge ngoại trừ Internet Explorer 8 trở xuống.