zoukankan      html  css  js  c++  java
  • 解决滚动条加载出现的页面抖动

    1、页面抖动

    原因:一个网站通常存在着多个页面,浏览器默认提供的overflow:auto;根据内容进行判断是否需要滚动条,
    这造成每个页面是否有右侧的滚动条是不一致的,这会导致有滚动条的页面跳转到没有滚动条的页面会发生页面抖动

    2、解决方法一:用overflow-y:scorll显性的设置右边提供滚动机制

    实现css代码:html {overflow-y: scroll;overflow-x: hidden;}
    缺点:不论屏幕是否需要滚动条,滚动条都会显示;

    3、解决方法二:滚动条宽度:calc(100vw - 100%)

    100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。
    calc()为计算方法
    解决抖动可以根据是否有有滚动条进行不同的左右宽度计算:style=" 100vw;overflow: hidden;padding-left: calc(100vw - 100%);"

  • 相关阅读:
    openresty
    ATS 相关
    pandas
    flask
    ansible
    zipline
    bcolz
    数据分析 --- concat
    Go --- 基础使用
    Go --- 基础介绍
  • 原文地址:https://www.cnblogs.com/Zxq-zn/p/12241070.html
Copyright © 2011-2022 走看看