如何在内容列表中为左侧边框设置动画
Posted
技术标签:
【中文标题】如何在内容列表中为左侧边框设置动画【英文标题】：How to animate left side border in the table of content 【发布时间】：2022-01-11 03:31:54 【问题描述】：我有左侧内容和右侧目录。
我正在做的是当用户滚动页面时，我必须为内容红色边框的右表设置动画。我尝试了以下代码。
function runOnScroll(element)
console.log(element);
;
const i = document.querySelectorAll(`.rightwrap li`);
i && window.addEventListener("scroll", () =>
for (let t of i)
let e = t.querySelector(".rightwrap li"),
n = window.pageYOffset + t.runOnScroll().top,
a = window.pageYOffset + i.runOnScroll().top,
o = window.scrollY + window.innerHeight / 2,
s = o - n;
s < 1 && (s = 0), e.style.height = s + "px", a < o ? i.classList.add("is-active") : i.classList.remove("is-active")
).mainWrapper
display: flex;
.leftWrap
width: 600px;
margin: auto;
border: 1px solid #222;
.rightwrap
position: fixed;
top: 0;
right: 50px;
.h-500
height: 650px
.dashlineWrap
background-color: #f9f9f9;
.vc_row
height: 500px;
.rightwrap ul li
position: relative;
list-style: none;
padding-bottom: 15px;
.rightwrap ul li::before
content: '';
width: 2px;
height: 100%;
background-color: #E5E5E5;
display: block;
position: absolute;
.rightwrap ul li.active::before
background-color: red;
.rightwrap ul li a
padding-left: 15px;
display: flex;
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="dashlineWrap">
<div class="vc_row h-500" id="tableofcontent-2">
<h4>Row 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="dashlineWrap">
<div class="vc_row h-500" id="tableofcontent-3">
<h4>Row 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</div>
<div class="rightwrap">
<ul>
<li class="active"><a href="">Row 1</a></li>
<li><a href="">Row 2</a></li>
<li><a href="">Row 3</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>【问题讨论】：
您将不得不使用一些类似于here 的逻辑来在相关元素上应用活动类。 --- 你根本没有发布任何 JS 代码......所以我无话可说。 @LouysPatriceBessette，好吧，让我在这里添加我的 js @LouysPatriceBessette，我将我的脚本添加到问题中。我使用的脚本是从谷歌那里学到的。我需要改进它。我在控制台中收到错误 Uncaught TypeError: t.runOnScroll is not a function after scroll. 【参考方案1】：let rowLis = document.querySelectorAll(".rightwrap li");
let section1 = document.getElementById("section1");
let section2 = document.getElementById("section2");
let section3 = document.getElementById("section3");
let section1Y = section1.getBoundingClientRect().top;
let section2Y = section2.getBoundingClientRect().top;
let section3Y = section3.getBoundingClientRect().top;
let point1 = section1Y;
let point2 = section2Y - section1Y;
let point3 = section3Y - section2Y;
const markRow = () =>
let section1Y = section1.getBoundingClientRect().top;
let section2Y = section2.getBoundingClientRect().top;
let section3Y = section3.getBoundingClientRect().top;
if ((section1Y < 0) && (section1Y > -point2))
rowLis[0].classList.add("active");
else rowLis[0].classList.remove("active");
if ((section2Y < 0) && (section2Y > -point3))
rowLis[1].classList.add("active");
else rowLis[1].classList.remove("active");
if ((section3Y < 0))
rowLis[2].classList.add("active");
else rowLis[2].classList.remove("active");
document.addEventListener("scroll", markRow);.mainWrapperdisplay: flex;
.leftWrapwidth: 600px;margin: auto;border: 1px solid #222;
.rightwrapposition: fixed;top: 0;right: 50px;
.h-500height:650px
.dashlineWrapbackground-color: #f9f9f9;
/*.vc_rowheight: 500px;*/
.rightwrap ul li
position: relative;
list-style: none;
padding-bottom: 15px;
.rightwrap ul li::before
content: '';
width: 2px;
height: 100%;
background-color: #E5E5E5;
display: block;
position: absolute;
.rightwrap ul li.active::before
background-color: red;
.rightwrap ul li a
padding-left: 15px;
display: flex;
<div class="mainWrapper">
<div class="leftWrap">
<section class="dashlineWrap" id="section1">
<div class="vc_row" id="tableofcontent-1">
<h4>Row 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div>
</section>
<section class="dashlineWrap" id="section2">
<div class="vc_row" id="tableofcontent-2">
<h4>Row 2</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="dashlineWrap" id="section3">
<div class="vc_row" id="tableofcontent-3">
<h4>Row 3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</div>
<div class="rightwrap">
<ul>
<li><a href="">Row 1</a></li>
<li><a href="">Row 2</a></li>
<li><a href="">Row 3</a></li>
</ul>
</div>
</div>【讨论】：
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。 让我看看答案 演示现在可以使用这些当前的部分长度。我需要一分钟来改进它。 @Azu，感谢您的回答，我正在动态获取内容。因为有更多的机会增加内容或减少内容。您已经静态定义了长度 -30 和 -500。有可能增加左侧和右侧的行数。 是的，这正是我现在正在改变的。我可以将ids 添加到section 标签中吗？以上是关于如何在内容列表中为左侧边框设置动画的主要内容，如果未能解决你的问题，请参考以下文章
如何在HTML / CSS中为页面上的所有内容设置边框/边距？