htmledit_views">
HTML+JS+CSS 鼠标上下移动页面（非滚动条）
html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Drag Scroll - IE11 Compatible</title>
<style>
body {
height: 2000px;
/* 为了方便测试滚动效果，设置一个较长的页面 */
/* 使用自定义的鼠标指针图片，这里假设图片名为 grab.cur */
cursor: url('file:///C:/grab.cur'), default;
}
/* 定义按下鼠标左键时的鼠标指针样式 */
body.dragging {
/* 使用自定义的鼠标指针图片，这里假设图片名为 grabbing.cur */
cursor: url('file:///C:/grabbing.cur'), default;
}
</style>
</head>
<body>
<!-- 这里可以添加具体的页面内容 -->
<h1>鼠标拖动滚动页面示例 - 兼容 IE11</h1>
<script>
// 定义变量来跟踪鼠标状态和初始位置
var isDragging = false;
var startY = 0;
var initialScrollTop = 0;
var body = document.body;
// 获取文档对象
var doc = document.documentElement || document.body;
// 监听鼠标按下事件
if (document.attachEvent) {
document.attachEvent('onmousedown', mouseDownHandler);
} else {
document.addEventListener('mousedown', mouseDownHandler);
}
function mouseDownHandler(event) {
event = event || window.event;
// 只有按下鼠标左键时才进行操作
if ((event.which && event.which === 1) || (event.button && event.button === 1)) {
// 判断是否点击在滚动条上
if (isClickOnScrollbar(event)) {
return; // 如果点击在滚动条上，不执行后续拖动逻辑
}
isDragging = true;
// 记录鼠标按下时的垂直位置
startY = event.clientY;
// 记录当前页面的滚动位置
initialScrollTop = doc.scrollTop;
// 添加 dragging 类，改变鼠标指针样式
addClass(body, 'dragging');
}
}
// 判断鼠标是否点击在滚动条上
function isClickOnScrollbar(event) {
// 获取窗口宽度
var windowWidth = window.innerWidth;
// 获取文档元素宽度
var docWidth = doc.clientWidth;
// 计算滚动条宽度
var scrollbarWidth = windowWidth - docWidth;
// 判断鼠标点击的水平位置是否在滚动条范围内
return event.clientX >= windowWidth - scrollbarWidth;
}
// 监听鼠标移动事件
if (document.attachEvent) {
document.attachEvent('onmousemove', mouseMoveHandler);
} else {
document.addEventListener('mousemove', mouseMoveHandler);
}
function mouseMoveHandler(event) {
event = event || window.event;
if (isDragging) {
// 计算鼠标垂直移动的距离
var deltaY = event.clientY - startY;
// 根据鼠标移动距离来滚动页面
doc.scrollTop = initialScrollTop - deltaY;
}
}
// 监听鼠标松开事件
if (document.attachEvent) {
document.attachEvent('onmouseup', mouseUpHandler);
} else {
document.addEventListener('mouseup', mouseUpHandler);
}
function mouseUpHandler() {
// 停止拖动状态
isDragging = false;
// 移除 dragging 类，恢复鼠标指针样式
removeClass(body, 'dragging');
}
// 监听鼠标离开窗口事件，防止鼠标移出窗口后仍在拖动
if (document.attachEvent) {
document.attachEvent('onmouseleave', mouseLeaveHandler);
} else {
document.addEventListener('mouseleave', mouseLeaveHandler);
}
function mouseLeaveHandler() {
isDragging = false;
// 移除 dragging 类，恢复鼠标指针样式
removeClass(body, 'dragging');
}
// 兼容 IE11 的添加类名函数
function addClass(element, className) {
if (element.className.indexOf(className) === -1) {
if (element.className === '') {
element.className = className;
} else {
element.className += ' ' + className;
}
}
}
// 兼容 IE11 的移除类名函数
function removeClass(element, className) {
var classNames = element.className.split(' ');
var newClassNames = [];
for (var i = 0; i < classNames.length; i++) {
if (classNames[i] !== className) {
newClassNames.push(classNames[i]);
}
}
element.className = newClassNames.join(' ');
}
</script>
</body>
</html>
