页面滚动（场景比较复杂）

代码

dom：

<div class="scroll-container">
    <div class="scroll-content">
        <div class="scroll-inner">
            内部滚动测试
        </div>
    </div>
</div>

css：

body {
    height: 1800px;
}
.scroll-container {
    max-height: 500px;
    background: pink;
    overflow: auto;
}
.scroll-content {
    height: 800px;
}
.scroll-inner {
    width: 300px;
    height: 300px;
    background-color: purple;
}

js：

let mouseX = 0;
let mouseY = 0;
let scrollStartEl = null; //用于记录滚动的起始元素，为了保证重现操作时为元素设置scrollTop时不出现偏差
let scrollRecordList = [];
let scrollElementSet = new Set();
// 通用节流方法
const throttle = function (cb, delay = 100) {
    let timer = null;
    return (ev) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            cb && cb(ev);
        }, delay)
    };
}
// 绑定滚动事件
setScrollWatcher = function (ev) {
    mouseX = ev && ev.clientX || mouseX;
    mouseY = ev && ev.clientY || mouseY;
    scrollStartEl = document.elementFromPoint(mouseX, mouseY);
    let el = scrollStartEl;
    while (el) {
        if (scrollElementSet.has(el)) {
            el = null;
        } else {
            el.onscroll = throttle(recordScrollInfo);
            scrollElementSet.add(el);
            el = el.parentNode;
        }
    }
};
// 记录滚动信息
recordScrollInfo = function (ev) {
    let el = scrollStartEl;
    // 单纯的滚动也可能引起鼠标对应的dom的变化，滚动结束也需要setScrollWatcher
    setScrollWatcher();
    let scrollRecordInfo = {
        mouseX: mouseX,
        mouseY: mouseY,
        scrollTopList: []
    }
    while (el) {
        scrollRecordInfo.scrollTopList.push(el.scrollTop);
        el = el.parentNode;
    }
    scrollRecordList.push(scrollRecordInfo);
    console.log(scrollRecordList)
}
// 绑定鼠标移动事件
document.onmousemove = throttle(setScrollWatcher);

讲解

这里大家请跟着我的思路一步一步来：

首先我给document绑定了鼠标移动事件，并且为其设置了节流

// 绑定鼠标移动事件
document.onmousemove = throttle(setScrollWatcher);

我现在得到了鼠标最后停止的位置，我的思路是，如果现在用户开始滚动鼠标滚轮，那么页面可能发生的滚动可能就出现在，鼠标悬停位置对应的元素及其所有祖先元素上！

正如前面的介绍，我现在要做的就是给鼠标悬停位置对应的元素及其所有祖先元素绑定滚动事件，即setScrollWatcher方法所做的事情。

let mouseX = 0;
let mouseY = 0;
let scrollStartEl = null; //用于记录滚动的起始元素，为了保证重现操作时为元素设置scrollTop时不出现偏差
let scrollElementSet = new Set();
// 绑定滚动事件
setScrollWatcher = function (ev) {
    mouseX = ev && ev.clientX || mouseX;
    mouseY = ev && ev.clientY || mouseY;
    scrollStartEl = document.elementFromPoint(mouseX, mouseY);
    let el = scrollStartEl;
    while (el) {
        if (scrollElementSet.has(el)) {
            el = null;
        } else {
            el.onscroll = throttle(recordScrollInfo);
            scrollElementSet.add(el);
            el = el.parentNode;
        }
    }
};

大家看的应该也不是很费劲，首先鼠标停下来了，我就记录一下现在鼠标所在的元素存在scrollStartEl中，之后为它以及他的所有祖先元素设置滚动事件（当然滚动事件也做了节流处理～）。

优化：其中为了防止重复绑定滚动事件，也做了一定的优化，引入了一个scrollElementSet，如果set中存在这个元素，那么直接结束循环。（tip：因为一个元素只会有一个直接父元素）

下一步就显而易见了，就是要在滚动事件结束之后对其进行记录～

recordScrollInfo = function (ev) {
    let el = scrollStartEl;
    // 单纯的滚动也可能引起鼠标对应的dom的变化，滚动结束也需要setScrollWatcher
    setScrollWatcher();
    let scrollRecordInfo = {
        mouseX: mouseX,
        mouseY: mouseY,
        scrollTopList: []
    }
    while (el) {
        scrollRecordInfo.scrollTopList.push(el.scrollTop);
        el = el.parentNode;
    }
    scrollRecordList.push(scrollRecordInfo);
    console.log(scrollRecordList)
}

我只需要记录滚动开始鼠标所在元素scrollStartEl及其所有祖先元素的scrollTop就可以了，之后在复线操作的过程中，根据记录的mouseX，mouseY找到滚动开始元素，并为其以及其所有祖先元素设置scrollTop即可～

注意：

单纯的滚动也可能引起鼠标对应的dom的变化，滚动结束也需要setScrollWatcher

因为滚动结束后鼠标位置对应的元素可能会变，所以确实需要在滚动前记录滚动开始元素，防止复现操作时出现元素层级不一致问题。

我感觉这个滚动的记录还是有点骚的，哈哈哈，我就是这么臭不要脸，哈哈哈～

完整代码【方便查看】

完整的测试代码在此，如果上github不方便，可以直接复制粘贴试一下～

<!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>Document</title>
    <style type="text/css">
        body {
            height: 1800px;
        }
        .scroll-container {
            max-height: 500px;
            background: pink;
            overflow: auto;
        }
        .scroll-content {
            height: 800px;
        }
        .scroll-inner {
            width: 300px;
            height: 300px;
            background-color: purple;
        }
        .btn {
            margin-top: 1000px;
        }
    </style>
</head>
<body>
    <!-用于测试多种类型的点击事件可否派发-->
    <label><input name="Fruit" type="radio" value="" class="aaa" />苹果 </label>
    <label><input name="Fruit" type="radio" value="" class="bbb" />桃子 </label>
    <label><input name="Fruit" type="radio" value="" />香蕉 </label>
    <label><input name="Fruit" type="radio" value="" />梨 </label>
    <label><input name="Fruit" type="radio" value="" />其它 </label>
    <!-用于测试keydown事件-->
    <input class ="inputTest" />
    <button class="btn">
        nihao
    </button>
    <div class="scroll-container">
        <div class="scroll-content">
            <div class="scroll-inner">
                内部滚动测试
            </div>
        </div>
    </div>
    <script>
        /*
        * 第一步：完成点击事件，滚动事件，键盘输入事件的记录和重现。
        * TODO:待办：拖拽事件？
        */
        const clickEvent = new MouseEvent('click');
        const focusEvent = new FocusEvent('focus',{
            view: window
        });
        // 通用节流方法
        const throttle = function (cb, delay = 100) {
            let timer = null;
            return (ev) => {
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    cb && cb(ev);
                }, delay)
            };
        }
        //TODO: 所有点击事件，滚动事件，键盘输入事件都需要记录时间点，相对最开始时间偏移，以正确重现
        // 测试点击事件
        document.onclick = function (ev) {
            const x = ev.clientX;
            const y = ev.clientY;
            setTimeout(() => {
                document.elementFromPoint(x, y).dispatchEvent(clickEvent);
            }, 2000)
        }
        document.getElementsByClassName('btn')[0].onclick = function () {
            console.log(11, 1)
        }
        // TODO:(待验证)测试重现滚动事件
        let mouseX = 0;
        let mouseY = 0;
        let scrollStartEl = null; //用于记录滚动的起始元素，为了保证重现操作时为元素设置scrollTop时不出现偏差
        let scrollRecordList = [];
        let scrollElementSet = new Set();
        setScrollWatcher = function (ev) {
            mouseX = ev && ev.clientX || mouseX;
            mouseY = ev && ev.clientY || mouseY;
            scrollStartEl = document.elementFromPoint(mouseX, mouseY);
            let el = scrollStartEl;
            while (el) {
                if (scrollElementSet.has(el)) {
                    el = null;
                } else {
                    el.onscroll = throttle(recordScrollInfo);
                    scrollElementSet.add(el);
                    el = el.parentNode;
                }
            }
        };
        recordScrollInfo = function (ev) {
            let el = scrollStartEl;
            // 单纯的滚动也可能引起鼠标对应的dom的变化，滚动结束也需要setScrollWatcher
            setScrollWatcher();
            let scrollRecordInfo = {
                mouseX: mouseX,
                mouseY: mouseY,
                scrollTopList: []
            }
            while (el) {
                scrollRecordInfo.scrollTopList.push(el.scrollTop);
                el = el.parentNode;
            }
            scrollRecordList.push(scrollRecordInfo);
            console.log(scrollRecordList)
        }
        // 绑定鼠标移动事件
        document.onmousemove = throttle(setScrollWatcher);
        // 测试键盘输入事件
        // 做法：假定，持续的键盘输入都是对同一个 input的输入，
        // 那我需要做的就是保存输入顺序，并记录上一刻点击的元素，并改变其value！！判断是不是input(有没有value属性来判断)，如果不是用innerHtml/innerText去塞！！！为了支持富文本
        document.onkeydown = function (ev) {
            console.log(ev)
        }
        const keyTestEl = document.getElementsByClassName('inputTest')[0];
        keyTestEl.dispatchEvent(clickEvent)
        console.log(keyTestEl, focusEvent)
        keyTestEl.dispatchEvent(focusEvent)
        // const keyEvent = new KeyboardEvent('keypress',{'key':'a'})
        //keyTestEl.dispatchEvent(keyEvent)
        //keyTestEl.value = '11111'
        // 测试radio的点击事件是否可以派发
        document.getElementsByClassName('bbb')[0].dispatchEvent(clickEvent)
        document.getElementsByClassName('aaa')[0].dispatchEvent(focusEvent)
    </script>
</body>
</html>

结束语

网络异常，图片无法展示

眼里要有小星星，生活才能亮晶晶～

感谢大家阅读，都要快乐生活哦～

下一篇文章，故事继续哈

js实现按键精灵——尝试前端实现自动化测试（一）下

页面滚动（场景比较复杂）

代码

讲解

完整代码【方便查看】

结束语

热门文章

最新文章

相关课程

相关电子书

相关实验场景