【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 版本

相关推荐
cs_dn_Jie27 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
清灵xmf2 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据2 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
334554323 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06【经验分享】Ubuntu22.04安装微信(linux官方版)07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）09RAG 实践- Ollama+RagFlow 部署本地知识库10你还在傻傻的打开页面输用户名和密码？来我教你实现自动化