A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510
2025-11-09 23:34:00 +08:00
parent aa5a7058ad
commit b7feedb350
10 changed files with 338 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
simple_scroll.html
View File

@@ -1,92 +1,130 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动触底固定效果</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { min-height: 200vh; background: #f8f9fa; }
.container { display: flex; width: 1000px; margin: 20px auto; gap: 20px; }
.left, .right { padding: 20px; border-radius: 8px; }
.left { width: 300px; background: #f0f8fb; }
.right { width: 680px; background: #fef7fb; }
.fixed { position: fixed; bottom: 20px; max-height: calc(100vh - 40px); overflow: hidden; z-index: 10; }
</style>
</head>
<body>
<div class="container">
<div class="left" id="left">
<h3>左侧短内容</h3>
<p>这里是左侧内容，相对较短。</p>
<p>当页面滚动时，左侧会先触底。</p>
<p>触底后会固定在底部。</p>
<p>右侧内容可以继续滚动。</p>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>滚动触底固定效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 200vh;
background: #f8f9fa;
}
.container {
display: flex;
width: 1200px;
margin: 20px auto;
gap: 20px;
}
.left {
width: 200px;
height: 1000px;
background-color: aqua;
}
.right {
flex: 1;
height: 1500px;
background-color: #ff0090;
}
.bottom {
width: 1200px;
height: 200px;
margin: 20px auto;
background-color: #0090ff;
}
</style>
</head>
<body>
<div class="container">
<div class="left" id="left"></div>
<div class="right" id="right"></div>
</div>
<div class="right" id="right">
<h3>右侧长内容</h3>
<p>右侧内容第1行</p>
<p>右侧内容第2行</p>
<p>右侧内容第3行</p>
<p>右侧内容第4行</p>
<p>右侧内容第5行</p>
<p>右侧内容第6行</p>
<p>右侧内容第7行</p>
<p>右侧内容第8行</p>
<p>右侧内容第9行</p>
<p>右侧内容第10行</p>
<p>右侧内容第11行</p>
<p>右侧内容第12行</p>
<p>右侧内容第13行</p>
<p>右侧内容第14行</p>
<p>右侧内容第15行</p>
</div>
</div>
<script>
// 极其简化的滚动固定实现
window.onload = function() {
<div class="bottom" id="bottom"></div>
<script>
// 获取DOM元素
const left = document.getElementById('left');
const right = document.getElementById('right');
const bottom = document.getElementById('bottom');
const container = document.querySelector('.container');
const containerLeft = container.getBoundingClientRect().left;
const containerRight = window.innerWidth - (containerLeft + container.offsetWidth);
let leftFixed = false;
let rightFixed = false;
let scrollTimeout;
// 存储初始位置信息
let containerLeft = 0;
let leftWidth = 0;
let rightWidth = 0;
let gap = 20; // 与CSS中的gap一致
// 节流滚动处理
window.onscroll = function() {
if (scrollTimeout) clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
const windowHeight = window.innerHeight;
const leftRect = left.getBoundingClientRect();
const rightRect = right.getBoundingClientRect();
// 左侧固定逻辑
if (!leftFixed && leftRect.bottom <= windowHeight && leftRect.top <= 0) {
left.classList.add('fixed');
left.style.left = containerLeft + 'px';
leftFixed = true;
} else if (leftFixed && leftRect.top > 0) {
left.classList.remove('fixed');
left.style.left = '';
leftFixed = false;
}
// 右侧固定逻辑
if (!rightFixed && rightRect.bottom <= windowHeight && rightRect.top <= 0) {
right.classList.add('fixed');
right.style.right = containerRight + 'px';
rightFixed = true;
} else if (rightFixed && rightRect.top > 0) {
right.classList.remove('fixed');
right.style.right = '';
rightFixed = false;
}
}, 30);
};
};
</script>
</body>
</html>
// 初始化函数
function init() {
const containerRect = container.getBoundingClientRect();
containerLeft = containerRect.left;
leftWidth = left.offsetWidth;
rightWidth = right.offsetWidth;
}
// 滚动时检查并固定元素
window.addEventListener('scroll', function() {
const scrollY = window.scrollY;
const windowHeight = window.innerHeight;
// 获取底部元素的顶部位置（相对于文档）
const bottomTop = bottom.getBoundingClientRect().top + scrollY;
// 获取左右元素的底部位置（相对于文档）
const leftBottom = left.getBoundingClientRect().bottom + scrollY;
const rightBottom = right.getBoundingClientRect().bottom + scrollY;
// 检查左侧元素是否需要固定
if (leftBottom >= bottomTop && left.style.position !== 'fixed') {
// 固定左侧元素
left.style.position = 'fixed';
left.style.bottom = '0';
left.style.left = containerLeft + 'px';
left.style.width = leftWidth + 'px';
} else if (scrollY < bottomTop - windowHeight && left.style.position === 'fixed') {
// 恢复左侧元素
left.style.position = '';
left.style.bottom = '';
left.style.left = '';
left.style.width = '';
}
// 检查右侧元素是否需要固定
if (rightBottom >= bottomTop && right.style.position !== 'fixed') {
// 固定右侧元素
right.style.position = 'fixed';
right.style.bottom = '0';
right.style.left = (containerLeft + leftWidth + gap) + 'px';
right.style.width = rightWidth + 'px';
} else if (scrollY < bottomTop - windowHeight && right.style.position === 'fixed') {
// 恢复右侧元素
right.style.position = '';
right.style.bottom = '';
right.style.left = '';
right.style.width = '';
}
});
// 窗口大小改变时重新计算位置
window.addEventListener('resize', function() {
init();
// 如果元素已固定，更新它们的位置
if (left.style.position === 'fixed') {
left.style.left = containerLeft + 'px';
}
if (right.style.position === 'fixed') {
right.style.left = (containerLeft + leftWidth + gap) + 'px';
}
});
// 初始化
init();
</script>
</body>
</html>