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

标签：doc   http   宽度   highlight   length   ima   win   java   pre   

一、好用的插件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
});

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

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

标签：doc   http   宽度   highlight   length   ima   win   java   pre   

原文地址：http://www.cnblogs.com/yy95/p/6953788.html