【JS】公共鼠标滚动事件(从下进入，从上进入)，html 版本

前端小袁2023-09-04 16:46
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>Document</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		:root {
			--c1-Height: 308vh;
			--c2-Height: 230vh;
		}

		html,
		body {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
		}
		body {
			overflow-y: auto;
		}
		.box {
			width: 100%;
			height: 120%;
			background-color: #b1ffb1;
		}
		.container {
			top: 0;
			width: 100%;
			position: relative;
			background-color: #4787e7b9;
			height: calc(var(--c1-Height) + var(--c2-Height));
		}

		.c1 {
			left: 0;
			width: 50%;
			position: absolute;
			height: var(--c1-Height);
			background-color: #cf7bcf;
		}
		.c2 {
			right: 0;
			width: 50%;
			position: absolute;
			height: var(--c2-Height);
			background-color: #cfad7b;
		}

		.flooter {
			width: 100%;
			height: 130vh;
			overflow: hidden;
			background-color: black;
		}
	</style>
	<body>
		<div class="box"></div>

		<div class="container">
			<div class="c1">
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
				<div>11111111111111111</div>
			</div>
			<div class="c2">
				<div>55555555555555555555555</div>
				<div>55555555555555555555555</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
				<div>22222222222222222222222</div>
			</div>
		</div>

		<div class="flooter"></div>
	</body>

	<script>
		const con = document.querySelector(".container");
		const c1 = document.querySelector(".c1");
		const c2 = document.querySelector(".c2");

        c1.style.top = 0;
        con.style.height = con.offsetHeight - window.innerHeight + 20 + "px";

        /** 从下进入 */
        const enterFromBelow = () => {
            /** 判断父元素距离顶部可视窗口的距离是否小于等于0 */
            if(con.getBoundingClientRect().top <= 0 && con.getBoundingClientRect().top >= -500) {
                c2.style.top = 0;
                c2.style.position = "fixed";
            };

            let bottom = window.innerHeight - c1.getBoundingClientRect().bottom;
            /** 判断左侧元素距离底部可视窗口的距离是否大于等于0 */
            if(bottom >= 0 && bottom < 500) {
                c1.style.top = '';
                c1.style.bottom = 0;
                c1.style.position = "fixed";
                c2.style.position = "absolute";
                c2.style.top = c1.offsetHeight - window.innerHeight + 20 + "px";
            };

            let pb = window.innerHeight - con.getBoundingClientRect().bottom;
            /** 判断父元素距离底部可视区域的距离 */
            if(pb >= 0 && pb < 500) {
                c1.style.position = "absolute";
            };
        };
        /** 从上进入 */
        const enterFromAbove = () => {
            /** 判断父元素距离顶部可视窗口的距离是否大于等于0 */
            if(con.getBoundingClientRect().bottom >= 0 && con.getBoundingClientRect().bottom < 500) {
                c1.style.top = '';
                c1.style.bottom = 0;
                c1.style.position = "absolute";
                c2.style.top = '';
                c2.style.bottom = 0;
                c2.style.position = "absolute";
            };

            let pb = window.innerHeight - con.getBoundingClientRect().bottom;
            /** 判断父元素距离底部可视区域的距离 */
            if(pb <= 0 && pb > -500) {
                c1.style.top = "";
                c1.style.bottom = 0;
                c1.style.position = "fixed";
            };

            let top = c2.getBoundingClientRect().top;
            /** 判断右侧元素距离顶部可视窗口的距离是否大于等于0 */
            if(top >= 0 && top < 500) {
                c1.style.top = 0;
                c1.style.bottom = '';
                c1.style.position = "absolute";
                c2.style.top = 0;
                c2.style.position = "fixed";
            };
            /** 判断父元素距离顶部可视窗口的距离是否小于等于0 */
            let ct = con.getBoundingClientRect().top;
            if(ct >= 0 && ct < 500) {
                c2.style.top = 0;
                c2.style.position = "absolute";
            };
        }

        /** 进入方式 0：未进入 1：进入 2：离开 */
        let way = 0;
		/** 定义滚动条滚动方向 */
		let scrollType = true;
		/** 获取初始滚动位置 */
		let scrollPos = window.pageYOffset || document.documentElement.scrollTop;
		/** 监听滚动条事件 */
		window.addEventListener("scroll", function (e) {
			/** 确定新的滚动位置 */
			const newScrollPos = window.pageYOffset || document.documentElement.scrollTop;
			if (newScrollPos > scrollPos) scrollType = true;
			else scrollType = false;
			/** 更新滚动位置 */
			scrollPos = newScrollPos;
            /** 不同方向进入可视区域 */
            if(scrollType && way != 0) way == 1 ? enterFromBelow() : '离开事件';
            else if(!scrollType && way != 0) way == 1 ? enterFromAbove() : '离开事件';
		});

		/** 观察元素 */
		const callback = (entries) => entries.forEach((entry) => entry.isIntersecting ? way = 1 : way = 2);

		/** 创建一个观察者 */
		const observer = new IntersectionObserver(callback, {
			threshold: 0,
		});
        observer.observe(document.querySelector(".container"));
	</script>
</html>

左右分屏滚动

> vue 版本

相关推荐
JUNAI_Strive_ving4 分钟前
番茄小说逆向爬取
javascript·python
看到请催我学习13 分钟前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
twins352033 分钟前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky1 小时前
JavaWeb——Vue组件库Element（3/6）：常见组件：Dialog对话框、Form表单（介绍、使用、实际效果）
前端·javascript·vue.js
煸橙干儿~~1 小时前
分析JS Crash（进程崩溃）
java·前端·javascript
哪 吒1 小时前
华为OD机试 - 几何平均值最大子数（Python/JS/C/C++ 2024 E卷 200分）
javascript·python·华为od
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕（下）—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
Q_w77422 小时前
一个真实可用的登录界面！
javascript·mysql·php·html5·网站登录
昨天；明天。今天。2 小时前
案例-任务清单
前端·javascript·css
一丝晨光2 小时前
C++、Ruby和JavaScript
java·开发语言·javascript·c++·python·c·ruby
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache