Liệu tràn: ẩn được áp dụng cho <body> có hoạt động trên iPhone Safari không?

131

Có overflow:hiddenáp dụng để <body>làm việc trên iPhone Safari không? Có vẻ như không. Tôi không thể tạo một trình bao bọc trên toàn bộ trang web để đạt được điều đó ...

Bạn có biết giải pháp?

Ví dụ: Tôi có một trang dài và đơn giản là tôi muốn ẩn nội dung bên dưới "nếp gấp" và nó sẽ hoạt động trên iPhone / iPad.

— Francesco
nguồn

1

Tuyệt vọng tìm kiếm để tìm câu trả lời cho bản thân mình.

— mwilcox

115

Tôi đã có một vấn đề tương tự và thấy rằng áp dụng overflow: hidden;cho cả hai htmlvà bodygiải quyết vấn đề của tôi.

html,
body {
    overflow: hidden;
}

Đối với iOS 9, bạn có thể cần phải sử dụng thay thế: (Cảm ơn chaothy!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

— Alex Haas
nguồn

12

Điều này không hoạt động trên iOS Safari. vị trí: tương đối cũng là cần thiết.

— Kevin

5

Có, thêm cả tương đối và tràn vào cơ thể html +

— wutang

3

điều này không hoạt động trên iOS 9, thậm chí sử dụng vị trí tương đối trên cơ thể và html

— Charles John Thompson III

1

Một lời cảnh báo, ẩn tràn trên thẻ <html> sẽ phá vỡ sự kiện cuộn của jQuery

— Brett Gregson

2

Điều này không hoạt động với tôi trên iOS 9, Safari. Cơ thể vẫn có thể cuộn, cũng sau khi thêm position: relative.

— Edo

87

body {
  position:relative; // that's it
  overflow:hidden;
}

— laFunk
nguồn

3

CẢM TẠ. BẠN. Tôi gặp vấn đề lớn khi các yếu tố được chuyển từ bên ngoài khung nhìn sang bên trong. Sẽ xảy ra một lỗi lạ trong đó nội dung được mở rộng. Đây là giải pháp cho tôi!

— Eric

48

Trong trường hợp của tôi, việc thêm "vị trí: tương đối" không giúp ích gì ngoài việc thêm "vị trí: đã sửa" hoạt động.

— LeastOne 11/03/2015

1

Yip này làm việc. Tôi đang xây dựng một trang web nơi họ muốn điều hướng di động đi qua nội dung - nhưng khi nó mở nội dung phía sau điều hướng trong nền vẫn cuộn. Các câu trả lời khác với vị trí, tràn & chiều cao cũng hoạt động nhưng với chiều cao, trang sẽ nhảy lên trên cùng khi tôi mở điều hướng. Tôi đoán nó là duy nhất cho tình huống của tôi nhưng chỉ nghĩ rằng tôi sẽ đề cập đến nó trong trường hợp bất kỳ ai khác có điều hướng chồng chéo có cùng một vấn đề.

— moonunit7

Trường hợp bao bọc đi đâu? Làm thế nào đây là một câu trả lời đầy đủ?

— Kugel

8

Thêm vị trí cố định sẽ giải quyết vấn đề, nhưng nó làm cho trang nhảy lên trên cùng, điều này không tốt cho UX nếu bạn thực hiện điều này trong nền trong khi bạn trình bày một menu hoặc phương thức. Để tạo một UX tốt, bạn nên, trước khi khóa vị trí, lưu vị trí cuộn của trang, sau đó áp dụng lại sau khi mở khóa.

— mike

27

Một số giải pháp được liệt kê ở đây có một số trục trặc kỳ lạ khi kéo dài cuộn đàn hồi. Để sửa lỗi mà tôi đã sử dụng:

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Nguồn: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

— Davey
nguồn

4

Điều này là tốt (hoạt động tốt hơn trong trường hợp của tôi hơn position: relative) tuy nhiên, vị trí cuộn bị mất sau khi khôi phục kiểu dáng mặc định (ví dụ: menu đóng).

— jmarceli

1

Đối với vị trí cuộn, bạn có thể sử dụng js (jquery trong ví dụ này) làm một cái gì đó như thế này:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— Davey

Điều đó thực sự đã đánh dấu cho tôi!

— D.Steinel

8

Có vấn đề này ngày hôm nay trên iOS 8 & 9 và dường như bây giờ chúng ta cần thêm chiều cao: 100%;

Vì vậy, thêm

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

— chaothy
nguồn

4

Kết hợp các câu trả lời và ý kiến ở đây và câu hỏi tương tự ở đây đã làm việc cho tôi.

Vì vậy, gửi bài như một câu trả lời.

Đây là cách bạn cần đặt div trình bao bọc xung quanh nội dung trang web của mình, ngay bên trong <body>thẻ.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Tạo lớp bao bọc như dưới đây.

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

Tôi cũng có ý tưởng từ câu trả lời này ở đây .

Và câu trả lời này ở đây cũng đã có một số thực phẩm cho suy nghĩ. Một cái gì đó có thể sẽ hoạt động tốt như nhau trong cả máy tính để bàn và thiết bị.

— Devraj Gadhavi
nguồn

Đây là giải pháp cho tôi.

— Roel Magdaleno

1

Điều này khiến trang cuộn lên đầu cho tôi khi phương thức bị đóng.

— Jason

4

Nó hoạt động trong trình duyệt Safari.

html,
body {
  overflow: hidden;
  position: fixed
}

— Sridhar
nguồn

4

Đối với tôi điều này:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

Vẫn chưa đủ, tôi đã không làm việc trên iOS trên Safari. Tôi cũng đã phải thêm:

top: 0;
left: 0;
right: 0;
bottom: 0;

Để làm cho nó hoạt động tốt. Hoạt động tốt bây giờ :)

— Loosie94
nguồn

2

Tôi đã làm việc với <body>và<div class="wrapper">

Khi cửa sổ bật lên mở ...

<body> có chiều cao 100% và tràn: ẩn

<div class="wrapper"> được vị trí: tương đối; tràn: ẩn, chiều cao: 100%;

Tôi sử dụng JS / jQuery để có được khả năng cuộn trang thực tế và lưu trữ giá trị dưới dạng dữ liệu do cơ thể

Sau đó, tôi cuộn đến vị trí cuộn trong .wrapper DIV (không có trong cửa sổ)

Đây là giải pháp của tôi:

JS / jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

Nó hoạt động tốt trên cả hai mặt ... máy tính để bàn và thiết bị di động (iOS).

Mẹo và cải tiến đều được chào đón :)

Chúc mừng!

— Chuyển đổi
nguồn

1

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

thêm cái này làm mặc định cho css của bạn

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

toggleClass lớp này để cắt trang

Khi bạn tắt lớp này, dòng đầu tiên sẽ gọi thanh cuộn trở lại

— Mùa đông dài
nguồn

0

Vâng, điều này có liên quan đến các bản cập nhật mới trong safari đang phá vỡ bố cục của bạn ngay bây giờ nếu bạn sử dụng overflow: hidden để chăm sóc xóa div.

— Lee McAlilly
nguồn

10

Bạn có thể đi vào chi tiết hơn với điều này, hoặc trích dẫn một nguồn? Câu trả lời này có thể đúng, nhưng nó không hữu ích lắm.

— pjmorse

0

Nó không áp dụng, nhưng nó chỉ áp dụng cho các thành phần nhất định trong DOM. ví dụ: nó sẽ không hoạt động trên bảng, td hoặc một số thành phần khác, nhưng nó sẽ hoạt động trên thẻ <DIV>.
ví dụ:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Chỉ được thử nghiệm trong iOS 4.3.

Một chỉnh sửa nhỏ: bạn có thể tốt hơn bằng cách sử dụng tràn: cuộn để cuộn hai ngón tay hoạt động.

— adam
nguồn

0

Tại sao không bọc nội dung bạn không muốn hiển thị trong một thành phần với một lớp và đặt lớp đó display:nonethành biểu định kiểu chỉ dành cho iphone và các thiết bị cầm tay khác?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
nguồn

0

Đây là những gì tôi đã làm: Tôi kiểm tra vị trí cơ thể y, sau đó làm cho cơ thể cố định và điều chỉnh đỉnh cho tiêu cực của vị trí đó. Ngược lại, tôi làm cho cơ thể tĩnh và đặt cuộn đến giá trị tôi đã ghi trước đó.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— Bạch Dương.
nguồn

-3

Chỉ cần thay đổi chiều cao cơ thể <300px (chiều cao của chế độ xem trên thiết bị di động trên không gian khoảng 300px đến 500px)

Mã não

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

— lepi kristian
nguồn

Không phải là một giải pháp rất thanh lịch và sẽ gây ra sự cố trên các thiết bị iOS lớn hơn các pixel cụ thể mà bạn chọn. Một giải pháp khác nhau nên được sử dụng.

— Badrush