overflow:hidden 是否适用于 <body> 在移动 Safari 上工作？

Question

应用于

overflow:hidden

的

<body>

在 iPhone Safari 上是否有效？看来不是。我无法在整个网站上创建包装器来实现这一目标......

你知道解决办法吗？

示例：我有一个很长的页面，我只是想隐藏“折叠”下方的内容，并且它应该适用于 iPhone/iPad。

Answer 1

我遇到了类似的问题，发现将

overflow: hidden;

应用于

html

和

body

解决了我的问题。

html,
body {
    overflow: hidden;
}

对于 iOS 9，您可能需要使用这个：（感谢 chaenu！）

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

Answer 2

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

Answer 3

经过很多天的尝试，我发现这个解决方案对我有用：

touch-action: none;
-ms-touch-action: none;

MDN

touch-action

文档

Answer 4

此处列出的一些解决方案在拉伸弹性滚动时出现一些奇怪的故障。为了解决这个问题，我使用了：

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

来源：http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

Answer 5

今天在 iOS 8 和 9 上遇到了这个问题，看来我们现在需要添加高度：100%；

所以添加

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

Answer 6

它可以在 Safari 浏览器中运行。

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

Answer 7

对我来说：

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

还不够，我无法在 iOS 和 Safari 上工作。我还必须补充：

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

使其发挥良好作用。现在工作正常:)

Answer 8

结合这里的答案和评论以及这里类似的问题对我有用。

因此将其作为整个答案发布。

以下是如何在网站内容周围放置一个包装器 div，就在

<body>

标签内。

 <!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>

创建如下包装类。

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

我也从这里的答案得到了这个想法。

而且这里的答案也有一些值得深思的地方。在桌面和设备上可能同样有效的东西。

Answer 9

我曾与

<body>

和

<div class="wrapper">

合作过

当弹出窗口打开时...

<body>

获得 100% 的高度和溢出：隐藏

<div class="wrapper">

获取位置：相对；溢出：隐藏；高度：100%；

我使用 JS/jQuery 来获取页面的实际滚动位置并将该值存储为 body 的数据属性

然后我滚动到 .wrapper DIV 中的滚动位置（不在窗口中）

这是我的解决方案：

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%;}

它在双方上都能很好地工作......桌面和移动（iOS）。

Answer 10

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

将此作为默认值添加到您的 CSS 中

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

将该类切换为剪切页面

当你关闭此类时，第一行将调用滚动条回来

Answer 11

是的，这与 safari 中的新更新有关，如果您使用溢出：隐藏来处理清除 div，这些更新现在会破坏您的布局。

Answer 12

它确实适用，但仅适用于 DOM 中的某些元素。例如，它不适用于表格、td 或其他一些元素，但适用于

标签。

例如：

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

仅在 iOS 4.3 中测试。

一个小修改：您可能最好使用溢出：滚动，这样两根手指滚动就可以了。

为什么不将您不想在元素中显示的内容包装在一个类中，并在仅适用于 iPhone 和其他手持设备的样式表中将该类设置为

display:none

？

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

这就是我所做的：我检查身体 y 位置，然后固定身体并将顶部调整到该位置的负值。相反，我使主体静态并将滚动设置为我之前记录的值。

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);
}

CSS 关键字值，将属性值重置为浏览器在其 UA 样式表中指定的默认值，就好像网页未包含任何 CSS 一样。例如，将

display:revert

 放在

<div>

 上将得到

display:block

。

overflow: revert;

我认为这会正常工作

如果您需要滚动模态

模态打开

$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});

模态关闭

$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));

我的版本。适用于 iOS

 if (isModalWindowClose) {
        document.querySelector('body').style.overflow = '';
        document.querySelector('html').style.overflow = '';
        
        const scrollY = document.body.style.top;
        
        document.querySelector('html').style.height = '';
        document.body.style.position = '';
        document.body.style.left = '';
        document.body.style.top = '';

        window.scrollTo(0, parseInt(scrollY || '0') * -1);

        document.querySelector('html').style['scroll-behavior'] = '';
    } else {
        document.body.style.top = `-${window.scrollY}px`;
        document.querySelector('html').style.height = `${window.innerHeight - 1}px`;
        
        document.body.style.position = 'fixed';
        document.body.style.left = '0';
        
        document.querySelector('body').style.overflow = 'hidden';
        document.querySelector('html').style.overflow = 'hidden';
        
        document.querySelector('html').style['scroll-behavior'] = 'unset';
    }

只需改变身高

< 300px (height of mobile viewport on landspace is around 300px to 500px)

JS

$( '.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%;
}

Answer 13

为什么不将您不想在元素中显示的内容包装在一个类中，并在仅适用于 iPhone 和其他手持设备的样式表中将该类设置为

display:none

？

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

Answer 14

这就是我所做的：我检查身体 y 位置，然后固定身体并将顶部调整到该位置的负值。相反，我使主体静态并将滚动设置为我之前记录的值。

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);
}

Answer 15

CSS 关键字值，将属性值重置为浏览器在其 UA 样式表中指定的默认值，就好像网页未包含任何 CSS 一样。例如，将

display:revert

 放在

<div>

 上将得到

display:block

。

overflow: revert;

我认为这会正常工作

Answer 16

如果您需要滚动模态

模态打开

$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});

模态关闭

$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));

Answer 17

我的版本。适用于 iOS

 if (isModalWindowClose) {
        document.querySelector('body').style.overflow = '';
        document.querySelector('html').style.overflow = '';
        
        const scrollY = document.body.style.top;
        
        document.querySelector('html').style.height = '';
        document.body.style.position = '';
        document.body.style.left = '';
        document.body.style.top = '';

        window.scrollTo(0, parseInt(scrollY || '0') * -1);

        document.querySelector('html').style['scroll-behavior'] = '';
    } else {
        document.body.style.top = `-${window.scrollY}px`;
        document.querySelector('html').style.height = `${window.innerHeight - 1}px`;
        
        document.body.style.position = 'fixed';
        document.body.style.left = '0';
        
        document.querySelector('body').style.overflow = 'hidden';
        document.querySelector('html').style.overflow = 'hidden';
        
        document.querySelector('html').style['scroll-behavior'] = 'unset';
    }

Answer 18

只需改变身高

< 300px (height of mobile viewport on landspace is around 300px to 500px)

JS

$( '.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%;
}

overflow:hidden 是否适用于 <body> 在移动 Safari 上工作？

问题描述投票：0回答：18

18个回答

最新问题

overflow:hidden 是否适用于 <body> 在移动 Safari 上工作？

问题描述 投票：0回答：18

18个回答

最新问题

问题描述投票：0回答：18