Does overflow:hidden applied to <body> work

2020-01-24 06:21发布

站内问答 / HTML/CSS
604 14 5

Does overflow:hidden applied to <body> work on iPhone Safari? It seems not. I can't create a wrapper on the whole website to achieve that...

Do you know the solution?

Example: I have a long page, and simply I want to hide the content that goes underneath the "fold", and it should work on iPhone/iPad.

14条回答
霸刀☆藐视天下
2楼-- · 2020-01-24 06:59 
html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

add this as default to your css

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

toggleClass this class to to cut page

when you turn off this class first line will call scrolling bar back

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
3楼-- · 2020-01-24 07:08

It does apply, but it only applies to certain elements within the DOM. for example, it won't work on a table, td, or some other elements, but it will work on a <DIV> tag.
eg:

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

Only tested in iOS 4.3.

A minor edit: you may be better off using overflow:scroll so two finger-scrolling does work.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
4楼-- · 2020-01-24 07:10

Yes, this is related to new updates in safari that are breaking your layout now if you use overflow: hidden to take care of clearing divs.

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
5楼-- · 2020-01-24 07:15

Its working in Safari browser.

html,
body {
  overflow: hidden;
  position: fixed
}
查看更多
0人赞 添加讨论(0) 举报
一夜七次
6楼-- · 2020-01-24 07:15

Simply change body height < 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%;
}
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
7楼-- · 2020-01-24 07:17

Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used: 

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

Source: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)