滚动事件类型判断（1.代码滚动 2.点击滚动区/滚动条 3.滑轮滚动）

做了一个消息列表，会通过websocket实时新加消息，然后自动往下滚动，以此查看最新消息，
这样有一个漏洞，就是用户滚动与代码滚动冲突，导致用户滚动失效
下面是部分代码（react语法注意）：
1.代码滚动
这个就不用多说明，就是自己写的代码控制滚动
2.点击滚动区/滚动条
使用鼠标点击滚动空白区域/拖动滚动条触发滚动，这个有两个方案
方案1：就是我使用过的onMouseDown，开始触发滚动。onMouseUp滚动结束
方案2：自定义滚动组件。这个成本比较高，
3.滑轮滚动
onWheel是鼠标滚轮事件,当用户滚动时scrollType 判定为false，代表是用户在滚动，用户滚动结束后就恢复到true,
贴一下点击滚动/滑轮滚动代码

--
let scrollType = true; //true:自动滚动,false:用户滚动
// 函数防抖处理-输入
let bounce = {
	timer1: null,
	lastTime1: null
};
--
const Minutes = (props) => {
// 防抖函数
function debounce(fn, wait, index) {
		let now = +new Date();
		if (bounce['lastTime' + index] - now < wait) {
			clearTimeout(bounce['timer' + index]);
		}
		bounce['timer' + index] = setTimeout(() => {
			fn();
			bounce['lastTime' + index] = +new Date();
		}, wait);
}
// 滑轮滚动
// 判定当前滚动类型-通过节流在用户停止滚动500s后，自动恢复代码滚动状态，表示可以进入自动滚动判定，
//因为自动滚动有单独的逻辑，在用户滚动某个位置后，是不会自动滚动，只有用户滚动到指定范围后才会恢复
function checkScrollType() {
	scrollType = true;
}
// 点击滚动
function clickScroll(e) {
// 因为这里当前元素宽度是330px，滚动条定义为6px，那么点击x坐标如果大于323就代表点击在滚动区域了
// 声明:点击不在这个元素上面肯定不会触发这个事件，不用计算其他场景了
// 滚动条本身存在浏览器兼容问题，所以想完全兼容只能使用方案2
		if (e.nativeEvent.offsetX < 323) return;
		scrollType = false;
	}
---
return (
     <div
     onMouseDown={clickScroll.bind(this)}
				onMouseUp={() => {
					scrollType = true;
				}}
 onWheel={() => {
  scrollType = false;
  //用了防抖
  debounce(
	() => {
		checkScrollType();
	},
	500,
	1
   );				
}} >
)
}

最后

以上就是平常泥猴桃为你收集整理的滚动事件类型判断（1.代码滚动 2.点击滚动区/滚动条 3.滑轮滚动）的全部内容，希望文章能够帮你解决滚动事件类型判断（1.代码滚动 2.点击滚动区/滚动条 3.滑轮滚动）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。