<!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>
Split screen scrolling left and right