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

相关推荐
Mr Xu_1 天前
告别冗长 switch-case：Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠1 天前
Vue 3 的toRefs保持响应性：讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
sleeppingfrog1 天前
zebra通过zpl语言实现中文打印（二）
javascript
未来之窗软件服务1 天前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君
baidu_247438611 天前
Android ViewModel定时任务
android·开发语言·javascript
VT.馒头1 天前
【力扣】2721. 并行执行异步函数
前端·javascript·算法·leetcode·typescript
有位神秘人1 天前
Android中Notification的使用详解
android·java·javascript
phltxy1 天前
Vue 核心特性实战指南：指令、样式绑定、计算属性与侦听器
前端·javascript·vue.js
Byron07071 天前
Vue 中使用 Tiptap 富文本编辑器的完整指南
前端·javascript·vue.js
Mr Xu_1 天前
告别硬编码：前端项目中配置驱动的实战优化指南
前端·javascript·数据结构
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03OpenClaw Chrome扩展使用教程 - 浏览器中继控制04使用 1panel面板 部署 php网站05Linux下V2Ray安装配置指南06UV安装并设置国内源07openclaw配置教程（linux+局域网ollama）08Vue-skills的中文文档09从零搭建一个 PHP 登录注册系统（含完整源码）10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南