不隐藏滚动条使滚动条不占据位置

问题描述:

之前自己仿写了一个聊天机器人的小项目,页面的高度会随着聊天数量的增加而变大,进而出现滚动条,滚动条默认的宽度是17px,所以每次出现滚动条右边的内容区域就会被挤压,影响布局

解决办法:

1.使用margin-right:calc(100% - 100vw );

100% 是浏览器的可用宽度 , 100vw是浏览器的内部宽度window.innerWidth 是包含滚动条在内的宽度,在没有滚动条的时候margin-right:0;没哟影响,在有滚动条的时候,margin-right:-17px,用来抵消滚动条占据的17px 宽度,

//css
  * {
        margin: 0;
        padding: 0;
      }
      html {
        overflow-y: auto;
        overflow-x: hidden;
      }
      .container {
        height: 2000px;
        margin-right: calc(100% - 100vw);
        /* padding: 17px; */ //注释方便看效果
        background-color: #00b83f;
        text-align: right;
      }

//html
 <div class="container">
      <div class="inner">
        <h1>我是容器内容</h1>
      </div>
    </div>

2.使用 overflow-y: overlay;

这个属性是新出的,文档暂时还查不到,兼容性也不是很好,在需要隐藏滚动条的容器内部使用,

//css
 * {
        margin: 0;
        padding: 0;
      }
      .container {
        margin: 100px auto;
        width: 200px;
        height: 100px;
      /* padding-right: 17px; */
      /* box-sizing: border-box; */ //注释方便看效果
      background-color: #00b83f;
        text-align: right;
        overflow: auto;
        overflow-y: overlay;
      }
      .inner {
        width: 100%;
        height: 300px;
        background-color: pink;
      }

//html
<div class="container">
      <div class="inner">
        <h1>我是容器内容</h1>
      </div>
    </div>