自定义浏览器滚动条的步进问题与处理

页面慢速滚动-步进抖动异常

js使用以下代码可以获取滚动条的位置 (适用于大多数主流浏览器)：

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

webkit 内核的浏览器使用默认滚动条或更新支持的 scrollbar-width 标准定义方法，获取到同一方向的滚动值是连贯有序的。

虽然自定义滚动条样式早已有应用，但最近遇到了一点问题，这是以前未曾出现过的，可能是与更新关联。

问题描述

PC端 webkit内核的浏览器在非滚轮滚动、即拖动滚动条同一方向 “向下/向上慢速滚动” 时 <几率出现步进值变成步退值、尤其步退值变成步进值偏多>，打破了滚动逻辑、将出现与 “页面滚动来回切换” 相关的业务错误。

移动端因不显示自定义滚动条，无此问题出现！

问题定位

使用了自定义滚动条样式、即在 -webkit-scrollbar 中的任意修改后，页面滚动同一方向时几率出现 步进值-1/步退值+1 从而出现了滚动值的不连续！这是滚动条的自定义影响到了js的原生方法值！

折中处理

页面的微小滚动需要确认是否为同一方向、滚动范围如何确定，而过小范围滚动也可能存在用户操作情形、不能单一通过业务逻辑覆盖掉。

var scrollValidTimeout = null;
/**
 * 页面滚动 - 1步进抖动【滑动抖动异常屏蔽】
 * @param {Function} firstValidEvent 多次切换事件
 */
function scrollingSectionValid (firstValidEvent) {
	// 避免快速非常态上下滚动页面时切换迟滞感/高频切换
	if (scrollValidTimeout === null) {
		firstValidEvent();
		scrollValidTimeout = setTimeout(function () {
			clearTimeout(scrollValidTimeout);
			scrollValidTimeout = null;
		}, 100);
	}
}

暂时处理是采用延时器、其中只确认并执行一次业务，其时限内用来屏蔽掉可能出现的滚动值偏差，虽仍有偏差情形出现、但比处理前也是减轻了很多，如有大佬有所了解或有更好方法的还望不吝赐教！

---

相关文章：
使用CSS自定义浏览器滚动条 (webkit 已最新支持 scrollbar-width)