Overflow-x: hidden không ngăn nội dung tràn vào trình duyệt di động

142

Tôi có một trang web ở đây .

Xem trong trình duyệt máy tính để bàn, thanh menu màu đen chỉ mở rộng đúng ra cạnh của cửa sổ, kể từ khi bodycó overflow-x:hidden.

Trong bất kỳ trình duyệt di động nào, cho dù là Android hay iOS, thanh menu màu đen hiển thị toàn bộ chiều rộng của nó, mang lại khoảng trắng ở bên phải trang. Theo như tôi có thể nói, khoảng trắng này thậm chí không phải là một phần của htmlhoặc bodythẻ.

Ngay cả khi tôi đặt chế độ xem thành một chiều rộng cụ thể trong <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

Trang web mở rộng đến 1100px nhưng vẫn có khoảng trắng ngoài 1100.

Tôi đang thiếu gì? Làm cách nào để giữ chế độ xem đến 1100 và cắt tràn?

— Bản địa
nguồn

1

Điều này đặc biệt là một vấn đề trong iOS9

— Chuck Le Mông

269

Tạo một div wrapper trang web bên trong <body>và áp dụng overflow-x:hiddencho các wrapper thay cho <body>hoặc <html>cố định vấn đề này.

Dường như các trình duyệt phân tích <meta name="viewport">thẻ chỉ đơn giản là bỏ qua overflowcác thuộc tính trên htmlvà bodythẻ.

Lưu ý: Bạn cũng có thể cần thêm position: relativevào div trình bao bọc.

— Bản địa
nguồn

44

Tôi phát hiện ra rằng ngoài việc thiết lập overflowđể hidden, tôi đã phải thiết lập positionđể fixed...

— Victor S

16

Thêm vị trí vào cố định ngăn tôi không thể cuộn!

— lý thuyết

5

Tôi đã thử, tôi đặt tất cả mã của mình vào trong div và cung cấp mã tràn-x: ẩn nhưng không hoạt động, tôi thêm <meta name = "viewport" content = "width = device-width, init-scale = 1"> quá nhưng không có gì thay đổi: / có ý tưởng nào không?

4

@ ngủowers overflow-x: hiddenvẫn không hoạt động đối với tôi ngay cả sau khi tôi thêm thẻ meta này. Bạn có thể vui lòng chia sẻ một liên kết đến trang web của bạn, nơi nó đang làm việc?

— jupiteror

3

Này băng đảng, khi tôi thấy nó cũng position:relativehoạt động.

— Thomas Valadez

80

thử

html, body {
  overflow-x:hidden 
}

Thay vì chỉ

body {
  overflow-x:hidden 
}

— tiểu khung
nguồn

7

Cảm ơn, nhưng việc áp dụng overflowbất cứ điều gì vào htmlvà / hoặc bodytrong bất kỳ kết hợp nào đều không giải quyết được vấn đề.

— Bản địa

Xin lỗi vì nó không phù hợp với bạn. Trước khi tôi trả lời tôi đã thực hiện một bài kiểm tra nhanh bằng cách sử dụng trang web của bạn và áp dụng đề xuất của tôi cho css của bạn. Nó đã khắc phục sự cố cho trình duyệt cá heo và tiêu chuẩn trên điện thoại Android của tôi.

— subarachnid

3

Đã làm cho tôi. eduardd.eu/projects/ezo (giữa chân 480 và 992px có vấn đề với hình ảnh tràn đầy của người phụ nữ và khăn tắm)

— Eduard

2

Có ai biết tại sao điều này hoạt động, khi chỉ định cơ thể {} và html {} riêng biệt không?

— hamncheez

1

Cũng cần phải thêm height:100%;, nếu không, cuộn dọc sẽ không hoạt động chính xác trên các trang có tải hình ảnh (làm cho trang tăng chiều cao).

— Arno van Oordt

69

Nhận xét của VictorS về câu trả lời được chấp nhận xứng đáng là câu trả lời của riêng nó bởi vì đó là một giải pháp rất thanh lịch, thực sự có hiệu quả. Và tôi sẽ thêm một chút vào tính hữu dụng của nó.

Victor ghi chú thêm position:fixedtác phẩm.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

Và thực sự nó làm. Tuy nhiên, nó cũng có một tác dụng phụ nhẹ về cơ bản là cuộn lên trên cùng. position:absolutegiải quyết vấn đề này, nhưng giới thiệu lại khả năng cuộn trên thiết bị di động.

Nếu bạn biết chế độ xem của mình ( plugin của tôi để thêm chế độ xem vào<body> ), bạn có thể chỉ cần thêm một chuyển đổi css cho position.

body.modal-open {
    // block scroll for mobile;
    // causes underlying page to jump to top;
    // prevents scrolling on all screens
    overflow: hidden;
    position: fixed;
}
body.viewport-lg {
    // block scroll for desktop;
    // will not jump to top;
    // will not prevent scroll on mobile
    position: absolute; 
}

Tôi cũng thêm điều này để ngăn trang bên dưới nhảy sang trái / phải khi hiển thị / ẩn phương thức.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}

— Brad
nguồn

2

Có cách nào để có được phần di động để không nhảy lên đầu?

— WraithKenny

1

Điều làm việc cho tôi là biến phần tử được cho là bị ẩn bằng cách tràn từ vị trí: tuyệt đối sang vị trí: cố định. Rất may.

— Chuck Le Mông

1

@WraithKenny - Nếu bạn muốn trang không thể nhảy lên đầu trên thiết bị di động, bạn có thể sử dụng phương pháp hack'ish / xấu xí sau đây. Bên trong chức năng phương thức của bạn, đảm bảo bạn có được phần bù cuộn hiện tại trước khi làm bất cứ điều gì, hơn là áp dụng kiểu phương thức cùng nhau và cũng đặt lề trên cùng của cơ thể bằng với phần bù của phần bù hiện tại. Đảm bảo rằng khi bạn xóa phương thức, đặt lề về 0 và cuộn trang trở lại phần bù ban đầu.

— Emil Borconi

2

Giải pháp này chỉ hoạt động trong trường hợp nội dung của phương thức phù hợp với màn hình, tức là bạn không cần phải cuộn chính phương thức đó.

— Tobias

Có những yếu tố cố định và tuyệt đối khác trên trang của tôi. Làm cho cơ thể position:fixed or absolutelàm phiền vị trí của họ là tốt. Không phù hợp / làm việc trong trường hợp của tôi :(

— sohaiby

31

Đây là giải pháp đơn giản nhất để giải quyết việc cuộn horisontal trong Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}

— Waltur Buerk
nguồn

1

Nó dường như làm việc. Nhưng bạn có một lời giải thích tại sao điều này làm việc?

— LarS

Không, cuối cùng nó đã không hoạt động. Cuối cùng tôi đã làm toán và đảm bảo rằng div không rộng hơn mức cho phép, css calc () đã giúp tôi rất nhiều vì nó cho phép hỗn hợp các chiều rộng tương đối (vw hoặc%) và chiều rộng tuyệt đối (px).

— LarS

Tất nhiên đây là một cách giải quyết. Vẫn còn một cái gì đó tràn ra ở đâu đó, bây giờ nó đã bị cắt. Hãy thử thêm quy tắc css: * {phác thảo: 1px solid red; } Nếu bạn vẫn không thể tìm thấy phần tử tràn, thì có thể đó là do lề ở đâu đó. Hãy thử thêm * {lề: 0! QUAN TRỌNG; } và xem nếu tràn biến mất.

— Waltur Buerk

Làm việc cho tôi. Điều thú vị là yếu tố ẩn thay đổi chiều rộng của cơ thể. Tuy nhiên, đối với tôi, đây là trường hợp của TẤT CẢ các trình duyệt Safari, không chỉ các trình duyệt di động. Chỉ cần sửa một Bootstrap 4 table-responsiveBug. Đây là giải pháp.

— CuckyFirthist

2

Tôi không thể tin rằng đây vẫn là một vấn đề trong năm 2019. Nhưng giải pháp trên hoàn toàn có hiệu quả. Cám ơn.

— staxim

28

Như trạng thái @ Nội địa, điều này dường như được gây ra bởi các trình duyệt phân tích cú pháp <meta name="viewport">thẻ.

Để giải quyết vấn đề này tại nguồn, hãy thử như sau:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

Trong các thử nghiệm của tôi, điều này ngăn người dùng thu nhỏ để xem nội dung bị tràn và kết quả là cũng ngăn chặn việc di chuyển / cuộn đến nội dung đó.

— Tempurturtul
nguồn

Thêm initial-scale=1vào một metatag chế độ xem hiện có thực sự khắc phục vấn đề. Cảm ơn!

— JamesWilson

6

Đối với tôi, nó đã minimum-scale=1sửa nó

— jpenna 23/07/18

Đây là những gì thực sự làm việc cho tôi sau khi thử mọi thứ khác. Cảm ơn rất nhiều !

— Harsh Limaye

16

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

hoạt động trên iOS9

— ollio
nguồn

3

Nó hoạt động, nhưng đặt vị trí: cố định vào cơ thể sẽ khiến bạn cuộn lên trên cùng

— ThaoD5

1

Lạ nhưng nó làm việc cho tôi mà không có vị trí cố định, cũng. Chỉ có một từ tất cả các giải pháp ở đây!

— Garavani

Chỉ có một công việc phù hợp với tôi, sử dụng chrom và boostrap + angularJS

— kiwicomb123

6

Giữ cho khung nhìn không bị ảnh hưởng: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Giả sử bạn muốn đạt được hiệu ứng của thanh màu đen liên tục ở phía bên phải: #menubarkhông nên vượt quá 100% , điều chỉnh bán kính đường viền sao cho cạnh phải được bình phương và điều chỉnh phần đệm để nó mở rộng thêm một chút về bên phải . Sửa đổi những điều sau đây của bạn #menubar:

border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/

Điều chỉnh paddingthành 10px tất nhiên để menu bên trái sang cạnh của thanh, bạn có thể đặt 40px còn lại cho mỗi li, 20px ở mỗi bên trái và phải:

.menuitem {
display: block;
padding: 0px 20px;
}

Khi bạn thay đổi kích thước trình duyệt nhỏ hơn, bạn sẽ thấy nền trắng: đặt kết cấu nền thay vì từ div sang body. Hoặc cách khác, điều chỉnh độ rộng menu điều hướng từ 100% đến giá trị thấp hơn bằng các truy vấn phương tiện. Có rất nhiều điều chỉnh được thực hiện cho mã của bạn để tạo bố cục phù hợp, tôi không chắc bạn định làm gì nhưng đoạn mã trên bằng cách nào đó sẽ khắc phục thanh tràn của bạn.

— Anne
nguồn

nếu bạn sử dụng, box-sizing: border-box;bạn có thể thêm phần đệm vào div 100% chiều rộng.

— Charles John Thompson III

6

Tạo một div trình bao bọc trang web bên trong phần thân và áp dụng phần tràn-> x: ẩn cho trình bao bọc INSTEAD của phần thân hoặc html đã khắc phục sự cố.

Điều này làm việc cho tôi sau khi cũng thêm position: relativevào trình bao bọc.

— Isaac F
nguồn

Điều này làm việc cho tôi. Tác dụng phụ là tôi đã có hai thanh cuộn thay vì một thanh. Giải pháp là làm cho nó overflow: hiddenthay vì overflow-x: hidden. Hoạt động trên Safari di động, Chrome, IE11 trên OSX và Win.

— pop

4

Thêm một trình bao bọc <div>xung quanh toàn bộ nội dung của bạn sẽ thực sự hoạt động. Trong khi về mặt ngữ nghĩa là "icky", tôi đã thêm một div với một lớp overflowWrap ngay bên trong bodythẻ và sau đó đặt CSS của tôi như thế này:

html, body, .overflowWrap {
overflow-x: hidden;
}

Có thể là quá mức cần thiết bây giờ, nhưng hoạt động như một nét duyên dáng!

— MBurnette
nguồn

4

Tôi gặp vấn đề tương tự với các thiết bị Android nhưng không phải thiết bị iOS. Được quản lý để giải quyết bằng cách chỉ định vị trí: tương đối trong div ngoài của các phần tử được định vị tuyệt đối (có tràn: ẩn cho div ngoài)

— Kwok Pan Fung
nguồn

4

Không có giải pháp duy nhất nào trước đây làm việc cho tôi, tôi phải trộn chúng và khắc phục sự cố trên các thiết bị cũ hơn (iphone 3).

Đầu tiên, tôi phải bọc nội dung html thành một div bên ngoài:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Sau đó, tôi đã phải áp dụng ẩn tràn cho trình bao bọc, vì overflow-x không hoạt động:

  #wrapper {
    overflow: hidden;
  }

và điều này đã khắc phục vấn đề.

— spaghetticode
nguồn

Điều này khác với câu trả lời của @ Indigenuity như thế nào?

— Ian Kemp

3

@ian Kemp tràn: hidden! = overflow-x: hidden

— spaghetticode

3

Tôi đã giải quyết vấn đề bằng cách sử dụng overflow-x: hidden; như sau

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

cấu trúc như sau

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

— vikas etagi
nguồn

3

Như subarachnid đã nói overflow-x ẩn cho cả thân và html hoạt động Ví dụ làm việc dưới đây

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

Liên kết

— Skylin R
nguồn

1

Tôi mới làm việc này được vài giờ, thử nhiều cách kết hợp nhiều thứ từ trang này và các trang khác. Điều cuối cùng làm việc cho tôi là tạo một div trình bao bọc trang web, như được đề xuất trong câu trả lời được chấp nhận, nhưng để đặt cả hai tràn thành ẩn thay vì chỉ tràn x. Nếu tôi để lại tràn-y khi cuộn, tôi kết thúc với một trang chỉ cuộn theo chiều dọc của một vài pixel và sau đó dừng lại.

#all-wrapper {
  overflow: hidden;
}

Chỉ thế này là đủ, không cần thiết lập bất cứ thứ gì trên phần tử cơ thể hoặc html.

— cao thủ
nguồn

1

Tôi đã thử nhiều cách từ trả lời trong chủ đề này, chủ yếu là hoạt động nhưng có một số tác dụng phụ như nếu tôi sử dụng overflow-x trên body,htmlnó có thể làm chậm / đóng băng trang khi người dùng cuộn xuống trên thiết bị di động.

sử dụng position: fixedtrên trình bao bọc / div bên trong cơ thể cũng tốt, nhưng khi tôi có một menu và sử dụng Javascript, nhấp vào cuộn hoạt hình đến một số phần, nó không hoạt động.

Vì vậy, tôi quyết định sử dụng touch-action: pan-y pinch-zoomtrên Wrapper / div bên trong cơ thể. Vấn đề được giải quyết.

— Jirayu L
nguồn

0

Cách duy nhất để khắc phục sự cố này cho phương thức bootstrap của tôi (chứa một biểu mẫu) là thêm mã sau vào CSS của tôi:

.modal {
    -webkit-overflow-scrolling: auto!important;
}

— Tobias
nguồn