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

Posted Una

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让页面滚动条不增大页面宽度相关的知识,希望对你有一定的参考价值。

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

 

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

以上是关于让页面滚动条不增大页面宽度的主要内容,如果未能解决你的问题,请参考以下文章

怎么让overflow的滚动条不占据位置

怎么让滚动条只显示在子盒子body不显示

div中镶嵌一个iframe,怎么让iframe的滚动条不起作用,而div的滚动条起作用

javascript前台开发问题,怎么设置使页面的滚动条不滚动,看详细描述

页面布局

使滚动条不占空间/防止布局移位