网页默认的滚动条不怎么好看，特别是对于网页内部元素使用滚动条时，默认样式就更加显得格格不入。

对于滚动条的样式设置，调整以下一个属性的值即可。

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的

::-webkit-scrollbar-button 滚动条两端的按钮

::-webkit-scrollbar-track 外层轨道

问题如下：

自定义封装的组件，在里面修改了全局的滚动条。然而在三方集成的时候，发现滚动条完全被改变了。

请问这个问题怎样解决？

// ============滚动条样式============
// 宽度、高度
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
//背景色
::-webkit-scrollbar-track {
background-color: #191c21;
}
// 滑块颜色
::-webkit-scrollbar-thumb {
background-color: #434b55;
}
// 滚动条右下角交叉部分
::-webkit-scrollbar-corner {
background-color: #434b55;
}

效果

方法一：sticky 方式

核心样式

        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }

使用场景

::-webkit-scrollbar 只支持WebKit的浏览器 (谷歌Chrome, 苹果Safari)可以使用。

全局样式

* {
  scrollbar-width: thin;
  // auto -浏览器默认滚动条宽度
  // thin -设置比默认滚动条更窄的宽度
  // none -隐藏滚动条，但是元素还可以滚动
  // **px -直接设置滚动条的宽度
}

// 垂直滚动条和水平滚动条相交的部分
::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

// 整个滚动条
::-webkit-scrollbar {
  width: 5px; // 宽度
  height: 5px; // 高度
  background-color: #a7b1c2; // 颜色
}

// 滚动条上的滚动滑块。
::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

// 滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

// 滚动条轨道
::-webkit-scrollbar-track {
  display: none;
}

// 滚动条没有滑块的轨道部分。
::-webkit-scrollbar-track-piece {
  display: none;
}

// 右下角拖动块（如：textarea的可拖动按钮）
::-webkit-resizer {
  background: #991d28;
}

大家好，今天给大家介绍一款，JavaScript+css实现的滚动和悬停动画效果的多彩菜单web前端源码（图1）。送给大家哦，获取方式在本文末尾。

拖动菜单时，菜单会出现折叠效果，非常好看（图2）

自适应分辨率（图3）

需求：当页面很长，有滚动条时，需要固定页面上的部分元素，便于下方元素和上方固定元素的对照。

.box1{
				width: 100%;
				height: 50px;
				background: skyblue;
			}
			.box2{
				width: 100%;
				height: 50px;
				background: darkorange;
				position: sticky;
				top: 0;
			}
			.box3{
				width: 100%;
				/*height: 1000px;*/
			}

场景

我是需要在table最后添加一行数据，然后把滚动条滚动到最后。

查网上的解决方案都是读取html结构，暴力的去获取，虽能解决问题，但是不喜欢这种打补丁的解决方案，我想着官方应该有相关的定义，于是就去看table的定义。

技术栈

在本教程中，您将通过几个简短的步骤学习如何使用 CSS 插入简写和原生 JavaScript 创建滚动到顶部按钮。

滚动到顶部按钮对于具有大量内容的网站、无限滚动的页面或具有可能导致内容滚动扩展的小屏幕的移动设备非常有用。

第一步，创建按钮

要创建滚动按钮，请使用带 href="#" 的锚标记，这会使浏览器在单击时返回页面顶部，或者您可以使用自定义 Id 返回页面的特定部分。