CSS预处理语言less自定义滑动条样式的方法

2023-06-14

CSS预处理语言less自定义滑动条样式，需要在类名后直接用双冒号 ::伪元素 的方式，而不用单冒号&：方式。

::伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。

示例1：自定义指定容器元素滑块和滑道样式

/** 容器 */
.wrap {
	width: 100%;
	height: 100%;
	overflow: scroll;
}

/** 滑动条宽高 */
.wrap::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.wrap::-webkit-scrollbar-track {
    background-color: #f4f4f4;
    -webkit-border-radius: 2em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 
}

.wrap::-webkit-scrollbar-thumb {
    background-color: #cbcccc;
    -webkit-border-radius: 2em; 
    -moz-border-radius: 2em; 
    border-radius: 2em; 
}

示例2：自定义全局滑块和滑道样式

/** 容器 */
.wrap {
	width: 100%;
	height: 100%;
	overflow: scroll;
}

/** 滑动条宽高 */
::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

/** 同上 */

无效示例：

/** 容器 */
.wrap {
	width: 100%;
	height: 100%;
	overflow: scroll;

	/** 滑动条宽高 */
	&:-webkit-scrollbar {
	    width: 2px;
	    height: 2px;
	}
}

（版权归cpury.com所有，转载请注明出处。）

WEB开发