解决页面滚动条出现和消失的过程页面会横向移动的问题
2018-01-10 18:55
621 查看
平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动条的出现占据了原本属于内容显示区的空间,自然内容就会被挤到左边去,毕竟这是一个很不好的体验,那么有什么好的解决方案呢?
这里我们可以借助
calc(): 用于计算,IE9+浏览器支持该属性。
vw:浏览器窗口宽度的相对单位,这个宽度是包含滚动条的
100%:这个宽度是页面内容去容器的宽度,不包括滚动条
于是:
可以自行测试
升级版稳定方案
这里我们可以借助
css3的语法:
calc(): 用于计算,IE9+浏览器支持该属性。
vw:浏览器窗口宽度的相对单位,这个宽度是包含滚动条的
100%:这个宽度是页面内容去容器的宽度,不包括滚动条
于是:
.wrap-outer{ margin-left:calc(100vw - 100%) }
可以自行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.wrap-outer{ margin-left:calc(100vw - 100%) }
</style>
<body>
<button id='btn'>改变高度</button>
<div class='wrap-outer' >
<div id='box' style="width:900px;margin:0 auto;height:500px;background: #999"></div>
</div>
</body>
<script>
let len = true
document.getElementById('btn').onclick = function() {
if(len) {
document.getElementById('box').style.height = '2000px'
len = !len
} else {
document.getElementById('box').style.height = '500px'
len = !len
}
}
</script>
</html>
升级版稳定方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; } </style> <body> <button id='btn'>改变高度</button> <div class='wrap' > <div id='box' style="width:900px;margin:0 auto;height:500px;background: #999"></div> </div> </body> <script> let len = true document.getElementById('btn').onclick = function() { if(len) { document.getElementById('box').style.height = '2000px' len = !len } else { document.getElementById('box').style.height = '500px' len = !len } } </script> </html>
相关文章推荐
- Extjs gridpanel 出现横向滚动条问题的解决方法
- 如何让滚动条消失,且页面可以正常滚动(解决写选项卡时可能遇见的一个问题)
- 手机页面出现横向滚动条的可能原因-解决办法
- Extjs gridpanel 出现横向滚动条问题的解决方法
- 解决把水晶报表下载到客户端过程中,出现下载整个页面(.aspx)或者直接载web页中打开word文件的问题!
- 整理ArcSDE 安装过程出现问题以及解决方法系列
- 安装过程中出现PKG_CONFIG_PATH的问题解决方法
- 用加载图片解决在ajax数据加载中页面出现短暂空白的问题
- 解决ScrollView嵌套listview出现进入页面不在顶部的问题
- magento 后台分类页面catelog,点击后,出现右边信息不同步显示,不显示点击的分类的信息,问题的解决!!!
- frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- firefox 滚动条消失引起页面抖动的问题
- 关于required=false出现页面跳转不过去的问题的解决
- 关于在使用EXTJS过程中页面出现白板的解决方法
- 1、解决sonar-checkstyle-plugin运行过程中出现的异常问题
- 关于WebView因图片太大导致出现横向滚动条问题
- frameset, iframe, frame框架页面出现横向滚动条bug的隐藏方法
- vue.js 部署到tomcat中出现访问路径不对,页面加载不出来问题及解决
- 关于页面刷新vuex数据消失问题解决方案