Vô hiệu hóa cuộn trên cơ thể

137

Tôi muốn tắt bodyhoàn toàn việc cuộn trên HTML . Tôi đã thử các tùy chọn sau:

overflow: hidden; (không hoạt động, không tắt chức năng cuộn, nó chỉ ẩn thanh cuộn)
position: fixed; (cái này hoạt động, nhưng nó cuộn hoàn toàn lên trên cùng, điều này không thể chấp nhận được cho ứng dụng cụ thể này)

Tôi không thể tìm thấy bất kỳ lựa chọn thay thế cho hai lựa chọn này, có còn nữa không?

html css scroll

— Micha Wiedenmann
nguồn

3

cho phần tử nào bạn đã áp dụng tràn: ẩn?

— Sajad Karuthedath

Chính xác thì bạn đang cố gắng đạt được điều gì ở đây? Mục tiêu cuối cùng của bạn là gì?

— jbutler483

2

Hiển thị mã có liên quan sẽ giúp bạn dễ dàng hơn.

— Kiểu dáng đẹp Geek

1

tràn: ẩn; là con đường để đi Nếu nó không hoạt động, bạn có một số vấn đề khác trong css của bạn. Hãy thử html, body {overflow: hidden;} nếu điều này không hoạt động hãy thử * {overflow: hidden;} và thử tìm hiểu xem điều gì là sai

— Jonas Grumann

245

Đặt heightvà overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

— con beo
nguồn

3

quên về phần thân "html," trước ".

2

Không hoạt động trên iOS khi bạn có thành phần lớp phủ có vị trí cố định.

— notQ

1

Bạn chỉ có thể thêm "tràn": "ẩn" và nó sẽ hoạt động tốt.

— JPG

Giải pháp này đã không ngay lập tức làm việc cho tôi, nhưng sau khi kiểm tra "lề" đã bị ghi đè ở đâu đó. Đặt "lề: 0;" của phần tử đó đã lừa

— joaoprib

19

HTML css hoạt động tốt nếu thẻ body không có gì bạn có thể viết tốt

<body scroll="no" style="overflow: hidden">

Trong trường hợp này, ghi đè phải nằm trên thẻ cơ thể, dễ kiểm soát hơn nhưng đôi khi gây đau đầu.

— Lalo
nguồn

21

Đây không phải là HTML5 hợp lệ

— mbomb007

@ mbomb007 Bạn có thể vui lòng nhận xét về lỗi ở đây liên quan đến HTML5 không?

— Ethan

5

@Ethan scrollThuộc tính không hợp lệ trên <body>thẻ. Nó không được liệt kê là hợp lệ trên bất kỳ thông số kỹ thuật tôi có thể tìm thấy. trường học w3 ; MDN ; Quackit

— mbomb007

14

Bài đăng này rất hữu ích, nhưng chỉ muốn chia sẻ một thay thế nhỏ có thể giúp người khác:

Thiết lập max-heightthay vì heightcũng làm thủ thuật. Trong trường hợp của tôi, tôi vô hiệu hóa cuộn dựa trên chuyển đổi lớp. Đặt .someContainer {height: 100%; overflow: hidden;}khi chiều cao của bộ chứa nhỏ hơn chiều cao của khung nhìn sẽ kéo dài vùng chứa, đó sẽ không phải là điều bạn muốn. Cài đặt max-heighttài khoản cho điều này, nhưng nếu chiều cao của bộ chứa lớn hơn chế độ xem khi nội dung thay đổi, vẫn vô hiệu hóa cuộn.

— joebjoe
nguồn

điều này đã tiết kiệm một ngày của tôi cho các trình duyệt máy tính để bàn mà không có tác dụng phụ không mong muốn của cuộn trên cùng. nhưng không hoạt động trên trình duyệt di động (iphone5s và Android).

— bob

5

Để thực hiện điều này, thêm 2 thuộc tính CSS trên <body>phần tử.

body {
   height: 100%;
   overflow-y: hidden;
}

Ngày nay, có rất nhiều trang web tin tức yêu cầu người dùng tạo tài khoản. Thông thường, họ sẽ cấp quyền truy cập đầy đủ vào trang trong khoảng một giây và sau đó họ hiển thị cửa sổ bật lên và ngăn người dùng cuộn xuống.

— bvdb
nguồn

Điều này ẩn thanh cuộn. Tuy nhiên, câu hỏi đặc biệt yêu cầu một giải pháp thay thế cho việc ẩn thanh cuộn

— DataGeek

@DataGeek, điều này không chỉ ẩn thanh cuộn, nó còn dừng khả năng cuộn xuống. Và như tôi hiểu đó là những gì được yêu cầu. tức là không chỉ che giấu nó, mà còn làm cho nó không thể cuộn xuống.

— bvdb