CSS có thể được sử dụng để ẩn thanh cuộn không? Bạn sẽ làm điều này như thế nào?

Đặt overflow: hidden;trên thẻ body như thế này:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Đoạn mã trên ẩn cả thanh cuộn ngang và dọc.

Nếu bạn chỉ muốn ẩn thanh cuộn dọc , hãy sử dụng overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

Và nếu bạn chỉ muốn ẩn thanh cuộn ngang , hãy sử dụng overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Lưu ý: Nó cũng sẽ vô hiệu hóa tính năng cuộn. Tham khảo các câu trả lời dưới đây nếu bạn chỉ muốn ẩn thanh cuộn, nhưng không phải là tính năng cuộn.

WebKit hỗ trợ các yếu tố giả thanh cuộn có thể được ẩn bằng các quy tắc CSS tiêu chuẩn:

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

Nếu bạn muốn ẩn tất cả các thanh cuộn, hãy sử dụng

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

Tôi không chắc chắn về việc khôi phục - điều này đã làm việc, nhưng có thể có một cách đúng đắn để làm điều đó:

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

Tất nhiên bạn luôn có thể sử dụng width: 0, sau đó có thể dễ dàng khôi phục width: auto, nhưng tôi không phải là người thích lạm dụng widthcác điều chỉnh khả năng hiển thị.

Firefox 64 hiện hỗ trợ thuộc tính chiều rộng thanh cuộn thử nghiệm theo mặc định (63 yêu cầu đặt cờ cấu hình). Để ẩn thanh cuộn trong Firefox 64:

#element {
    scrollbar-width: none;
}

Để xem trình duyệt hiện tại của bạn có hỗ trợ phần tử giả hay không scrollbar-width, hãy thử đoạn mã này:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

.

Ừ kiểu vậy, chắc vậy..

Khi bạn đặt câu hỏi: "Có thể gỡ bỏ các thanh cuộn của trình duyệt theo cách nào đó, thay vì chỉ đơn giản là ẩn hoặc ngụy trang", mọi người sẽ nói "Không thể" vì không thể xóa thanh cuộn khỏi tất cả các trình duyệt trong một cách tuân thủ và tương thích chéo, và sau đó có toàn bộ lập luận về khả năng sử dụng.

Tuy nhiên, có thể ngăn trình duyệt không có nhu cầu tạo và hiển thị thanh cuộn nếu bạn không cho phép trang web của mình bị tràn.

Điều này chỉ có nghĩa là chúng ta phải chủ động thay thế hành vi tương tự mà trình duyệt thường làm cho chúng ta và nói với trình duyệt lời cảm ơn nhưng không cảm ơn bạn thân. Thay vì cố gắng loại bỏ các thanh cuộn (mà tất cả chúng ta đều biết là không thể), chúng ta có thể tránh cuộn (hoàn toàn khả thi) và cuộn trong các yếu tố mà chúng ta tạo ra và có nhiều quyền kiểm soát hơn.

Tạo một div với tràn ẩn. Phát hiện khi người dùng cố gắng cuộn, nhưng không thể vì chúng tôi đã vô hiệu hóa khả năng cuộn của trình duyệt với tràn: bị ẩn .. và thay vào đó di chuyển nội dung lên bằng JavaScript khi điều này xảy ra. Do đó, tạo cuộn riêng của chúng tôi mà không cần cuộn mặc định của trình duyệt hoặc sử dụng plugin như iScroll .

---

Vì lợi ích của sự kỹ lưỡng; tất cả các cách cụ thể của nhà cung cấp để thao tác các thanh cuộn:

Internet Explorer 5.5+

* Các thuộc tính này không bao giờ là một phần của đặc tả CSS, cũng không bao giờ được phê duyệt hoặc tiền tố của nhà cung cấp, nhưng chúng hoạt động trong Internet Explorer và Konqueror. Chúng cũng có thể được đặt cục bộ trong bảng kiểu người dùng cho mỗi ứng dụng. Trong Internet Explorer, bạn tìm thấy nó trong tab "Trợ năng", trong Konqueror trong tab "Biểu định kiểu".

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Kể từ Internet Explorer 8, các thuộc tính này được Microsoft cung cấp tiền tố, nhưng chúng vẫn chưa bao giờ được W3C chấp thuận .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Thông tin chi tiết về Internet Explorer

Internet Explorer scrollcung cấp khả năng thiết lập có hay không tắt hoặc bật thanh cuộn; nó cũng có thể được sử dụng để lấy giá trị vị trí của các thanh cuộn.

Với Microsoft Internet Explorer 6 trở lên, khi bạn sử dụng !DOCTYPEkhai báo để chỉ định chế độ tuân thủ tiêu chuẩn, thuộc tính này áp dụng cho thành phần HTML. Khi chế độ tuân thủ tiêu chuẩn không được chỉ định, như với các phiên bản trước của Internet Explorer, thuộc tính này áp dụng cho thành BODYphần, KHÔNG phải là thành HTMLphần.

Cũng đáng lưu ý rằng khi làm việc với .NET, lớp ScrollBar trong System.Windows.Controls.Primitiveskhung Trình bày có trách nhiệm hiển thị các thanh cuộn.

http://msdn.microsoft.com/en-us/l Library /ie / ms534393 (v = vs85) .aspx

• MSDN. Thuộc tính UI cơ bản
• W3C. Về thuộc tính thanh cuộn không chuẩn
• MSDN. Lớp .NET ScrollBar

WebKit

Các tiện ích mở rộng WebKit liên quan đến tùy chỉnh thanh cuộn là:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Mỗi cái có thể được kết hợp với các bộ chọn giả bổ sung:

• :horizontal - Lớp giả ngang áp dụng cho bất kỳ miếng thanh cuộn nào có hướng nằm ngang.
• :vertical - Lớp giả dọc áp dụng cho bất kỳ miếng thanh cuộn nào có hướng dọc.
• :decrement- Lớp giả giảm dần áp dụng cho các nút và phần theo dõi. Nó cho biết liệu nút hoặc đoạn nhạc có làm giảm vị trí của chế độ xem hay không khi sử dụng (ví dụ: lên trên thanh cuộn dọc, bên trái trên thanh cuộn ngang).
• :increment- Lớp giả tăng dần áp dụng cho các nút và phần theo dõi. Nó cho biết liệu một nút hoặc đoạn nhạc có tăng vị trí của chế độ xem hay không khi được sử dụng (ví dụ: xuống trên thanh cuộn dọc, ngay trên thanh cuộn ngang).
• :start- Lớp giả bắt đầu áp dụng cho các nút và phần theo dõi. Nó cho biết liệu đối tượng được đặt trước ngón tay cái.
• :end- Lớp giả cuối kết thúc áp dụng cho các nút và phần theo dõi. Nó cho biết liệu đối tượng được đặt sau ngón tay cái.
• :double-button- Lớp giả hai nút áp dụng cho các nút và phần theo dõi. Nó được sử dụng để phát hiện xem một nút có phải là một phần của một cặp nút được đặt cùng nhau ở cùng một đầu của thanh cuộn hay không. Đối với các bản nhạc, phần này cho biết phần bản nhạc có tiếp tục một cặp nút hay không.
• :single-button- Lớp giả đơn nút áp dụng cho các nút và phần theo dõi. Nó được sử dụng để phát hiện xem một nút có nằm ở cuối thanh cuộn hay không. Đối với các đoạn nhạc, nó cho biết liệu đoạn nhạc đó có tiếp tục với nút đơn hay không.
• :no-button - Áp dụng cho các đoạn nhạc theo dõi và cho biết liệu đoạn nhạc đó có chạy đến cạnh của thanh cuộn hay không, tức là không có nút nào ở cuối đoạn nhạc đó.
• :corner-present - Áp dụng cho tất cả các phần của thanh cuộn và cho biết có hay không một góc thanh cuộn.
• :window-inactive- Áp dụng cho tất cả các phần của thanh cuộn và cho biết cửa sổ có chứa thanh cuộn hiện đang hoạt động hay không. .

Ví dụ về các kết hợp này

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• Thanh cuộn kiểu dáng - Webkit.org

Thông tin chi tiết về Chrome

addWindowScrollHandler Handler tĩnh công khaiRegistration addWindowScrollHandler (Trình xử lý Window.ScrollHandler)

  Thêm một tham số Trình xử lý Window.ScrollEvent: handler - handler Returns: trả về đăng ký trình xử lý [ nguồn ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

Mozilla có một số phần mở rộng để thao tác các thanh cuộn, nhưng tất cả chúng đều được khuyến nghị không được sử dụng.

• -moz-scrollbars-none Họ khuyên bạn nên sử dụng tràn: ẩn ở vị trí này.
• -moz-scrollbars-horizontal Tương tự như tràn-x
• -moz-scrollbars-vertical Tương tự như tràn-y

• -moz-hidden-unscrollableChỉ hoạt động nội bộ trong một cài đặt hồ sơ người dùng. Vô hiệu hóa cuộn các phần tử gốc XML và vô hiệu hóa bằng cách sử dụng các phím mũi tên và bánh xe chuột để cuộn các trang web.

• Tài liệu phát triển Mozilla trên 'tràn'

Thông tin chi tiết về Mozilla

Điều này thực sự không hữu ích theo như tôi biết, nhưng đáng chú ý là thuộc tính kiểm soát xem thanh cuộn có được hiển thị trong Firefox hay không ( liên kết tham chiếu ):

• Thuộc tính:        thanh cuộn
• Loại:               nsIDOMBarProp
• Mô tả:   Đối tượng kiểm soát xem thanh cuộn có được hiển thị trong cửa sổ hay không. Thuộc tính này là "có thể thay thế" trong JavaScript. Chỉ đọc

Cuối cùng nhưng không kém phần quan trọng, đệm giống như phép thuật.

Như đã được đề cập trước đây trong một số câu trả lời khác, đây là một minh họa đủ tự giải thích.

Bài học lịch sử

Chỉ vì tôi tò mò, tôi muốn tìm hiểu về nguồn gốc của thanh cuộn và đây là những tài liệu tham khảo tốt nhất tôi tìm thấy.

• 10 phát minh về cuộn và thanh cuộn
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Điều khoản khác

Trong dự thảo đặc tả HTML5, seamlessthuộc tính được xác định để ngăn các thanh cuộn xuất hiện trong iFrames để chúng có thể được trộn với nội dung xung quanh trên một trang . Mặc dù yếu tố này không xuất hiện trong phiên bản mới nhất.

Các scrollbarđối tượng BarProp là con của các windowđối tượng và thể hiện các yếu tố giao diện người dùng có chứa một cơ chế di chuyển, hoặc một số khái niệm giao diện tương tự. window.scrollbars.visiblesẽ trở lại truenếu các thanh cuộn được nhìn thấy.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

API Lịch sử cũng bao gồm các tính năng phục hồi cuộn trên điều hướng trang để duy trì vị trí cuộn khi tải trang.

window.history.scrollRestorationcó thể được sử dụng để kiểm tra trạng thái cuộn lại hoặc thay đổi trạng thái của nó (nối thêm ="auto"/"manual". Tự động là giá trị mặc định. Thay đổi nó thành thủ công có nghĩa là bạn là nhà phát triển sẽ sở hữu mọi thay đổi cuộn có thể được yêu cầu khi người dùng đi qua lịch sử của ứng dụng . Nếu bạn cần, bạn có thể theo dõi vị trí cuộn khi bạn đẩy các mục lịch sử với history.pushState ().

---

Đọc thêm:

• Thanh cuộn trên Wikipedia
• Thanh cuộn (Windows)
• Phương pháp cuộn
• Phương pháp cuộn - Microsoft Dev Network
• iScroll trên Github (được tham khảo trong phần đầu tiên ở trên)
• Scrolling và Scrollbars một bài viết về khả năng sử dụng của Jakob Nielsen

Ví dụ

• Các bảng cuộn độc lập không có cuộn cơ thể (chỉ sử dụng CSS) - Ben Frain (10-21-2014)

Bạn có thể thực hiện điều này với một trình bao bọc divcó ẩn tràn và bộ bên trong divthành auto.

Để xóa divthanh cuộn của bên trong , bạn có thể kéo nó ra khỏi divkhung nhìn của bên ngoài bằng cách áp dụng một lề âm cho bên trong div. Sau đó áp dụng phần đệm bằng nhau cho div bên trong để nội dung được xem.

Câu đố

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

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

Đây là giải pháp của tôi, về mặt lý thuyết bao gồm tất cả các trình duyệt hiện đại:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html có thể được thay thế bằng bất kỳ yếu tố nào bạn muốn ẩn thanh cuộn.

_{Lưu ý : Tôi đã đọc lướt 19 câu trả lời khác để xem mã tôi đang đăng có được bao phủ hay không và dường như không có câu trả lời nào tổng hợp tình huống như năm 2019, mặc dù rất nhiều trong số đó đi vào chi tiết tuyệt vời. Xin lỗi nếu điều này đã được người khác nói và tôi đã bỏ lỡ nó.}

Tôi nghĩ rằng tôi đã tìm thấy một cách giải quyết cho các bạn nếu bạn vẫn quan tâm. Đây là tuần đầu tiên của tôi, nhưng nó đã làm việc cho tôi ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Nếu bạn đang tìm giải pháp để ẩn thanh cuộn cho thiết bị di động, hãy làm theo câu trả lời của Peter !

Đây là một jsfiddle , sử dụng giải pháp bên dưới để ẩn thanh cuộn ngang.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Nó đã được thử nghiệm trên máy tính bảng Samsung với Android 4.0.4 (Ice Cream Sandwich, cả trong trình duyệt gốc và Chrome) và trên iPad có iOS 6 (cả trong Safari và Chrome).

Sử dụng CSS overflowbất động sản :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Dưới đây là một số ví dụ:

• kiểm tra tràn-x, tràn-y
• Thuộc tính tràn CSS

Như những người khác đã nói, sử dụng CSS overflow.

Nhưng nếu bạn vẫn muốn người dùng có thể cuộn nội dung đó (không hiển thị thanh cuộn), bạn phải sử dụng JavaScript.

Hãy xem câu trả lời của tôi ở đây để có giải pháp: Ẩn thanh cuộn trong khi vẫn có thể cuộn bằng chuột / bàn phím

Ngoài câu trả lời của Peter:

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

Điều này sẽ hoạt động tương tự cho Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }

Tiếp cận trình duyệt chéo để ẩn thanh cuộn.

Nó đã được thử nghiệm trên Edge, Chrome, Firefox và Safari

Ẩn thanh cuộn trong khi vẫn có thể cuộn bằng bánh xe chuột!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Nếu bạn muốn cuộn để làm việc, trước khi ẩn thanh cuộn, hãy xem xét việc tạo kiểu cho chúng. Các phiên bản hiện đại của OS X và HĐH di động đều có thanh cuộn, trong khi không thực tế để lấy bằng chuột, lại khá đẹp và trung tính.

Để ẩn thanh cuộn, một kỹ thuật của John Kurlak hoạt động tốt ngoại trừ việc khiến người dùng Firefox không có bàn di chuột không có cách cuộn trừ khi họ có chuột với bánh xe, điều mà họ có thể làm, nhưng ngay cả khi đó họ thường chỉ có thể cuộn theo chiều dọc .

Kỹ thuật của John sử dụng ba yếu tố:

• Một yếu tố bên ngoài để che dấu thanh cuộn.
• Một yếu tố ở giữa để có thanh cuộn.
• Và một phần tử nội dung để đặt cả kích thước của phần tử ở giữa và làm cho nó có thanh cuộn.

Có thể đặt kích thước của các yếu tố bên ngoài và nội dung giống nhau để loại bỏ việc sử dụng tỷ lệ phần trăm, nhưng tôi không thể nghĩ ra bất cứ điều gì khác sẽ không hoạt động với điều chỉnh đúng.

Mối quan tâm lớn nhất của tôi là liệu tất cả các phiên bản trình duyệt có đặt thanh cuộn để hiển thị nội dung tràn có thể nhìn thấy hay không. Tôi đã thử nghiệm trong các trình duyệt hiện tại, nhưng không phải những trình duyệt cũ hơn.

Xin tha thứ cho SASS của tôi ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Kiểm tra

Hệ điều hành X là 10.6.8. Windows là Windows 7.

• Thanh cuộn Firefox 32.0 bị ẩn. Các phím mũi tên không cuộn, ngay cả sau khi nhấp để lấy nét, nhưng bánh xe chuột và hai ngón tay trên trackpad thì có. OS X và Windows.
• Thanh cuộn Chrome 37.0 bị ẩn. Phím mũi tên hoạt động sau khi nhấp để tập trung. Bánh xe chuột và trackpad làm việc. OS X và Windows.
• Internet Explorer 11 Thanh cuộn ẩn. Phím mũi tên hoạt động sau khi nhấp để tập trung. Bánh xe chuột hoạt động. Các cửa sổ.
• Thanh cuộn Safari 5.1.10 ẩn. Phím mũi tên hoạt động sau khi nhấp để tập trung. Bánh xe chuột và trackpad làm việc. HĐH X.
• Android 4.4.4 và 4.1.2. Thanh cuộn ẩn. Chạm vào cuộn hoạt động. Đã thử trong Chrome 37.0, Firefox 32.0 và HTMLViewer trên 4.4.4 (bất kể đó là gì). Trong HTMLViewer, trang có kích thước của nội dung bị che và cũng có thể cuộn! Cuộn tương tác chấp nhận được với thu phóng trang.

Tôi chỉ nghĩ rằng tôi đã chỉ ra cho bất kỳ ai khác đọc câu hỏi này rằng cài đặt overflow: hidden(hoặc tràn-y) trên bodyphần tử không che giấu thanh cuộn cho tôi.

Tôi đã phải sử dụng các htmlyếu tố.

Tôi đã viết một phiên bản WebKit với một số tùy chọn như tự động ẩn , phiên bản nhỏ , chỉ cuộn -y hoặc chỉ-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Sao chép mã CSS này vào mã khách hàng để ẩn thanh cuộn:

<style>

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

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

</style>

HTML của tôi là như thế này:

<div class="container">
  <div class="content">
  </div>
</div>

Thêm phần này vào divnơi bạn muốn ẩn thanh cuộn:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Và thêm nó vào container

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Để vô hiệu hóa thanh cuộn dọc, chỉ cần thêm overflow-y:hidden;.

Tìm hiểu thêm về nó: tràn .

Câu trả lời của tôi sẽ cuộn ngay cả khi overflow:hidden;sử dụng jQuery:

Ví dụ: cuộn theo chiều ngang với bánh xe chuột:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Tôi tin rằng bạn có thể thao tác nó với overflowthuộc tính CSS, nhưng chúng có hỗ trợ trình duyệt hạn chế. Một nguồn tin cho biết đó là Internet Explorer 5 (và sau này), Firefox 1.5 (và sau này) và Safari 3 (và sau này) - có thể đủ cho mục đích của bạn.

Cuộn, cuộn, cuộn có một cuộc thảo luận tốt.

Tôi đã thử tất cả mọi thứ và điều tốt nhất cho giải pháp của tôi là luôn có chương trình thanh cuộn dọc, sau đó thêm một số lề âm để ẩn nó.

body {
  overflow-y: scroll;
  margin-right: -20px;
}