讓頁面滾動條不增大頁面寬度

一、好用的插件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/

 

記錄使用過程，未完待續...