Tắt thanh cuộn dọc và ngang của trình duyệt

117

Có thể tắt thanh cuộn dọc và ngang của trình duyệt bằng jQuery hoặc javascript không?

javascript jquery

— naveen
nguồn

Tôi nghĩ rằng trong một số trường hợp đặc biệt nếu bạn muốn chuyển đổi giữa cuộn và không có cuộn giải pháp này là một lợi thế hơn: stackoverflow.com/questions/8701754/...

— Yousef Salimpour

Bạn có thể tìm một câu trả lời hoàn chỉnh hơn cho câu hỏi này ở đây stackoverflow.com/a/25561646/1922144

— davidcondrey

144

Trong trường hợp bạn cần khả năng ẩn và hiển thị động thanh cuộn, bạn có thể sử dụng

$("body").css("overflow", "hidden");

và

$("body").css("overflow", "auto");

ở đâu đó trong mã của bạn.

— Alexander Prokofyev
nguồn

4

Tràn ẩn không phải lúc nào cũng hoạt động trong IE. Xem câu trả lời của AnthonyWJones bên dưới.

— Tiago Almeida

4

oveflow: hiddensẽ không ngăn cản bất cứ điều gì trên điện thoại thông minh.

— dvlden

Trong chrome, vô hiệu hóa này scrollbar mà không cần che giấu nó (nó vẫn còn đó và vẫn thay đổi kích thước của tất cả mọi thứ khác, nhưng bây giờ nó chuyển sang màu xám)

— taltamir

120

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

— Lyncee
nguồn

5

Hai phiếu tán thành là rất ít vì là câu trả lời javascript thuần túy duy nhất.

— Fzs2

2

@HermannIngjaldsson: Thấy OP yêu cầu giải pháp JavaScript hoặc jQuery và đã chấp nhận giải pháp jQuery 4 năm trước, điều đó chỉ có ý nghĩa. Tôi không nói câu trả lời là không tốt, chỉ nói rõ ràng về số phiếu thấp hơn. +1 từ tôi.

— Không,

đây là giải pháp duy nhất phù hợp với tôi, vì phần tràn ẩn cơ thể không tấn công toàn bộ tài liệu, đây là giải pháp phù hợp cho vấn đề này! cảm ơn rất nhiều, bạn đã tiết kiệm cho tôi rất nhiều thời gian!

— Adnane.T

Đây là một giải pháp tuyệt vời và đáng được ủng hộ. Nó cũng giải quyết vấn đề với css cố định, nơi trang sẽ được cuộn lên đầu.

— haipham23

50

Thử CSS

<body style="overflow: hidden">

— Ray Lu
nguồn

15

Để tương thích với trình duyệt, tôi cũng sẽ thêm kiểu này vào thẻ HTML: html, body {tràn: ẩn;}

— Ady

32

Cho đến nay chúng ta có tràn: ẩn trên cơ thể. Tuy nhiên IE không phải lúc nào cũng tôn trọng điều đó và bạn cũng cần phải đặt scroll = "no" trên phần tử body và / hoặc đặt tràn: ẩn trên phần tử html.

Bạn có thể thực hiện điều này xa hơn khi bạn cần 'kiểm soát' cổng xem, bạn có thể làm điều này: -

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

Phần tử được cấp chiều cao 100% trong phần nội dung có chiều cao đầy đủ của khung nhìn cửa sổ và phần tử được định vị hoàn toàn bằng cách sử dụng bottom: nnPX sẽ được đặt nn pixel trên cạnh dưới của cửa sổ, v.v.

— AnthonyWJones
nguồn

2

không phải là ',' nên là ';', trong cơ thể css?

— paynestrike

12

Hãy thử CSS.

Nếu bạn muốn loại bỏ Ngang

overflow-x: hidden;

Và nếu bạn muốn loại bỏ Dọc

overflow-y: hidden;

— shafraz
nguồn

10

Trong các phiên bản IE hiện đại (IE10 trở lên), các thanh cuộn có thể được ẩn bằng cách sử dụng thuộc -ms-overflow-styletính .

html {
     -ms-overflow-style: none;
}

Trong Chrome, các thanh cuộn có thể được tạo kiểu:

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

Điều này rất hữu ích nếu bạn muốn sử dụng cơ thể cuộn 'mặc định' trong ứng dụng web, nhanh hơn đáng kể overflow-y: scroll.

— Lg102
nguồn

chỉ điều này đã làm việc cho tôi từ tất cả các câu trả lời :) cảm ơn!

— Gediminas

9

Trong trường hợp bạn cũng cần hỗ trợ cho Internet Explorer 6, chỉ cần làm tràn html

$("html").css("overflow", "hidden");

và

$("html").css("overflow", "auto");

— Gawin
nguồn

5

IE có một số lỗi với các thanh cuộn. Vì vậy, nếu bạn muốn một trong hai, bạn phải bao gồm những điều sau để ẩn thanh cuộn ngang:

overflow-x: hidden;
overflow-y:scroll;

và để ẩn dọc:

overflow-y: hidden;
overflow-x: scroll;

— Zeeshan Ali
nguồn

4

(Tôi chưa thể bình luận, nhưng tôi muốn chia sẻ điều này):

Mã của Lyncee phù hợp với tôi trong trình duyệt trên máy tính để bàn. Tuy nhiên, trên iPad (Chrome, iOS 9), nó bị treo ứng dụng. Để khắc phục, tôi đã thay đổi

document.documentElement.style.overflow = ...

đến

document.body.style.overflow = ...

đã giải quyết được vấn đề của tôi.

— Erasmus Cedernaes
nguồn

2

Bởi vì Firefox có một mũi tên cắt ngắn chủ chốt, có thể bạn muốn đặt một <div>xung quanh nó với phong cách CSS: overflow:hidden;.

— Qvcool
nguồn

2

Sử dụng JQuery, bạn có thể tắt thanh cuộn bằng mã này:

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Ngoài ra, bạn có thể kích hoạt lại nó bằng mã này:

 $('body').unbind('mousewheel');

— gtzinos
nguồn