解决页面滚动条出现和消失的过程页面会横向移动的问题

平时我们看一些网页刚开始加载的时候没有多少内容,页面也没有出现纵向滚动条,当我们点击加载更多,页面内容高度超过一屏于是出现滚动条,这个时候,页面会向左横向移动一段距离,正好是滚动条的宽度,这是因为滚动条的出现占据了原本属于内容显示区的空间,自然内容就会被挤到左边去,毕竟这是一个很不好的体验,那么有什么好的解决方案呢?
这里我们可以借助css3 的语法:
calc(): 用于计算,IE9+浏览器支持该属性。
vw:浏览器窗口宽度的相对单位,这个宽度是包含滚动条的
100%:这个宽度是页面内容去容器的宽度,不包括滚动条
于是:

.wrap-outer{
    margin-leftcalc(100vw - 100%)
}

可以自行测试


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
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>

升级版稳定方案


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
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>

你可能感兴趣的:(css)