让页面滚动条不增大页面宽度

Posted 2020-09-21 Una

一、好用的插件perfect-scrollbar

     在项目中快速利用perfect-scrollbar

     基础使用方法：npm安装perfect-scrollbar  npm install perfect-scrollbar

                         可以直接在项目文件中引入对应的perfect-scrollbar.css和perfect-scrollbar.js（还支持其他模块加载方式，见官方文档）

                          创建一个div元素并为其设置一个高度

                          initialize初始化（可以配置参数，自定义滚动条样式）

                          要想在指定元素中显示合适的滚动条，需要给该元素样式添加：position：relative和overflow： hidden

                          设置之后，最后的内容显示出来不可以再向上滚动的问题也不用再考虑了

例如：

我的左边导航栏显示滚动条的例子

var screenHeight = window.innerHeight  //浏览器窗口的内部高度

var component_left = $(".side-nav");
/* var  screenHeight =  document.documentElement.clientHeight; */
var leftScrollHeight = screenHeight-92-40+"px";
component_left.style.height = leftScrollHeight;

Ps.initialize(component_left, {
wheelSpeed: 3,
//wheelPropagation: true,
//maxScrollbarLength: middleScrollHeight
});

 

去掉滚动条：

.ps.ps--active-y>.ps__scrollbar-y-rail {
    display: none;
    background-color: none;
}

二、CSS vw让overflow:auto页面滚动条出现时不跳动

     http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/

 

记录使用过程，未完待续...