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

相关推荐
寒水馨31 分钟前
macOS下载、安装electron-v43.2.0（附安装包electron-v43.2.0-darwin-arm64.zip）
javascript·macos·electron·node.js·跨平台·桌面应用开发·开源框架
光影少年1 小时前
RN 路由栈管理、页面销毁、返回拦截
javascript·react native·react.js
_lucas1 小时前
做了一个glsl在线调试工具
前端·javascript·three.js
To_OC9 小时前
LC 51 N 皇后：我以为难的是回溯，结果栽在了对角线下标
javascript·算法·leetcode
小林ixn11 小时前
从零到一理解 React 父子组件通信：手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
窝子面13 小时前
手搓最简前后端协作-node
javascript·数据库
kyriewen14 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距，比我想的大得多
前端·javascript·ai编程
এ慕ོ冬℘゜14 小时前
前端基础：什么是时间戳？JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
sugar__salt16 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
SmartBoyW16 小时前
CSS弹性布局（Flexbox）学习笔记：从零开始搞懂弹性布局
前端·javascript
热门推荐
01GitHub 镜像站点02如何新建文件夹？ 电脑新建文件夹的4种方法032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04AI科技热点日报 | 2026年07月01日05国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10【解构】DeepSeek V4 发布：技术报告深度解读 + 横向对比六大开源模型，我们的判断是……