关于前端:滚动条常用知识点总结

参考：

• 自定义浏览器滚动条款式（兼容 chrome 和 firefox）
• ::-webkit-scrollbar
• 【CSS】滚动条款式的优化
• 这个大略是批改滚动条款式办法最全的文章了

暗藏滚动条

先将元素设置为可滚动的：

div {
  height: 200px;
  overflow: scroll; // 或 auto
}

webkit 写法：

div::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

// 或
div::-webkit-scrollbar {display:none;}

IE10+：

div {-ms-overflow-style: none;}

Firefox：

div {scrollbar-width: none;}

批改默认款式

webkit

webkit 滚动条的选择器：

• ::-webkit-scrollbar——整个滚动条
• ::-webkit-scrollbar-button——滚动条上的按钮（高低箭头）
• ::-webkit-scrollbar-thumb——滚动条上的滚动滑块
• ::-webkit-scrollbar-track——滚动条轨道
• ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道局部
• ::-webkit-scrollbar-corner——当同时有垂直滚动条和程度滚动条时交汇的局部
• ::-webkit-resizer——右下角可拖动调整大小的滑块

比拟罕用的是批改宽度、圆角和色彩：

  div::-webkit-scrollbar {width: 10px;}
  /* 滑块 */
  div::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background-color: rgb(81, 81, 255);
  }
  /* 轨道 */
  div::-webkit-scrollbar-track {background-color: rgb(218, 255, 255);
  }

还能够用伪类来更准确管制滚动条款式：

• :horizontal

  • 抉择程度方向的滚动条

• :vertical

  • 抉择垂直方向滚动条

• :decrement

  • 抉择上按钮（垂直滚动条）、左按钮（程度滚动条）
  • 抉择滑块上方的轨道碎片(track piece)（垂直滚动条）、滑块左方的轨道碎片（程度滚动条）

• :increment

  • 与:decrement 相同

• :start

  • 抉择滑块后方的按钮或轨道碎片(track piece)

• :end

  • 抉择滑块前方的按钮或轨道碎片(track piece)

• :double-button

  • 实用于按钮和轨道碎片
  • 用于判断按钮是不是滚动条同一端的一对按钮中的一个，或轨道完结的地位是否是一对按钮

• :single-button

  • 实用于按钮和轨道碎片
  • 判断按钮是滚动条一端的独立一个，或轨道完结的地位是否是一个独立按钮

• :no-button

  • 实用于轨道碎片，抉择滚动条两端没有按钮时的轨道碎片

• :corner-present

  • 是否存在滚动条角落

• :window-inactive

  • 焦点不在该窗口时

比方抉择滑块的上局部轨道：

 div::-webkit-scrollbar-track-piece:start {}

IE

IE 浏览器的滚动条只能批改色彩，无奈扭转宽度等。它的选择器如下：

• scrollbar-3dlight-color：平面滚动条亮边的色彩
• scrollbar-3dshadow-color：平面滚动条暗影的色彩
• scrollbar-highlight-color：滚动条空白局部的色彩
• scrollbar-darkshadow-color：平面滚动条强暗影的色彩
• scrollbar-face-color: 平面滚动条的色彩
• scrollbar-arrow-color：三角箭头的色彩
• scrollbar-track-color：轨道色彩
• scrollbar-base-color：滚动条的根本色彩

Firefox

Firefox 的滚动条只能批改宽度（属性 scrollbar-width）和色彩（属性 scrollbar-color）。

scrollbar-width 值：

• auto：默认宽度
• thin：更窄的滚动条
• none：暗藏滚动条

scrollbar-color 值：

• auto：默认色彩
• light：浅色滚动成果
• dark：深色滚动成果

• 具体色彩值，可传两个值，第一个滚轮色彩，第二个滚动条背景色

  • 如 scrollbar-color: red white;

JS 实现滚动条

应用一个容器包裹内容和滚动条：

<div class="box-wrap">
  <div class="box">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
  
  <div class="scroll">
    <div class="scroll__thumb"></div>
  </div>
</div>

款式上留神将滚动条暗藏，以及将滚动条定位到左边：

.box-wrap {
  position: relative;
  height: 400px;
  width: 400px;
}
.box {
  height: 100%;
  width: 100%;
  border: 1px solid rgb(52, 45, 45);
  overflow: scroll;
}
.box::-webkit-scrollbar{display: none;}

.box div {height: 50px;}

.scroll {
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgb(255, 218, 218);
  width: 15px;
  height: 100%;
}
.scroll__thumb {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  border-radius: 20px;
  background-color: brown;
}

js 要点：

• 将内容元素高度比上它的滚动高度，失去滑块高度
• 监听滚动事件，挪动滑块

const boxWrap = document.querySelector('.box-wrap')
const box = document.querySelector('.box')
const thumb = document.querySelector('.scroll__thumb')

const boxHeight = boxWrap.clientHeight
const contentHeight = box.scrollHeight

const persent = boxHeight / contentHeight

thumb.style.height = persent*100 + '%';// 滑块高度

box.addEventListener('scroll', (e) => {thumb.style.transform = 'translateY(' + (e.target.scrollTop / boxHeight)*100 + '%)'
})

效果图：

这样只是简略实现了滚动成果，没有欠缺其余的性能比方滑块可拖动、高度不够时不显示滚动条等，懒人 倡议应用封装好的插件。

滚动条插件 mCustomScrollbar

插件的应用也很简略，间接在页面中引入它的 js 和 css 文件（文件下载地址）：

<link rel="stylesheet" href="/css/jquery.mCustomScrollbar.css" />

<!-- 插件基于 JQuery, 因而也须要引入 JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

能够通过 js 初始化，或通过 html 上增加 class，须要留神的是滚动元素应该具备高度，且 overflow 属性为 hidden 或 auto：

(function($){$(window).on("load",function(){$(".content").mCustomScrollbar();});
})(jQuery);

<!-- data-mcs-theme 示意滚动条主题色彩 -->
<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>

一些罕用配置：

// 设置程度、垂直，或同时两个方向的滚动条
$(".content").mCustomScrollbar({axis:"x" // 程度});
$(".content").mCustomScrollbar({axis:"y" // 垂直});
$(".content").mCustomScrollbar({axis:"yx" // 垂直、程度});


// 设置主题
$(".content").mCustomScrollbar({theme:"dark"  // 默认 light});

// 滚动条地位
$(".content").mCustomScrollbar({scrollbarPosition: "inside" // 或 "outside"});

// 是否自动隐藏滚动条
$(".content").mCustomScrollbar({autoHideScrollbar: true});

// 是否反对键盘按键滚动
$(".content").mCustomScrollbar({keyboard:{ enable: true}
});

//.......

罕用办法：

// 滚动到某地位
$(selector).mCustomScrollbar("scrollTo",position,options)

// 例子
$(selector).mCustomScrollbar("scrollTo","bottom",{
  scrollInertia:3000, // 持续时间
  scrollEasing:"easeOut", // 过渡成果
});

// 禁用滚动条
 $(selector).mCustomScrollbar("disable")

// 进行滚动事件
$(selector).mCustomScrollbar("stop")

如果想本人设置滚动条款式，能够通过自定义主题：

$(selector).mCustomScrollbar({theme:"test"});

mCustomScrollbar 会给元素生成 mCS-test（mCS- 主题名称）的类，能够通过该类来管制款式：

.mCS-test.mCSB_scrollTools .mCSB_dragger {......}
.mCS-test.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{......}
.mCS-test.mCSB_scrollTools .mCSB_draggerRail{......} 
......

更多具体用法能够查看官网。