针对不同 window 大小的交叉口观察器微调
Intersection Observer fine tuning for different window sizes
到目前为止,这是我的代码:
const mediaInViewport = document.querySelectorAll('.media');
const links = Array.from(document.querySelectorAll('.link'));
let actLink = links[0];
document.body.addEventListener('click', (event) => {
if (event.target.tagName === 'a') {
actLink.classList.remove('active');
actLink = links.find(link => event.target.href === link.href)
actLink.classList.add('active');
}
}, false)
observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
const closestParent = entry.target.closest('section');
if (closestParent) {
actLink.classList.remove('active');
actLink = links.find(link =>
link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
)
actLink.classList.add('active');
}
}
});
}, {
threshold: 0
});
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // Wait for images to fully load
() => {
mediaInViewport.forEach((item) => {
observer.observe(item);
});
}, 1000);
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
text-decoration: none;
color: inherit;
}
body {
display: flex;
cursor: default;
}
#left,
#right {
width: 50%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
#left {
background-color: rgb(220, 220, 220);
}
#right {
background-color: rgb(200, 200, 200);
}
.media {
padding: 10px;
padding-bottom: 0;
}
.media:nth-last-child(1) {
margin-bottom: 10px;
}
img {
display: block;
width: 100%;
}
.link {
cursor: pointer;
}
.active {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<a class="link active" href="#landscape">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#beer">Beer</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscape">
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
</section>
<section id="cats">
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
</section>
<section id="beer">
<article class="media beer">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Craft_Beer_at_the_Taedonggang_Microbrewery_No._3_%2812329931855%29.jpg">
</article>
</section>
<section id="food">
<article class="media food">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
</article>
</section>
</div>
观察功能应该适用于所有 window 尺寸。目前,如果 window 尺寸稍大,例如“啤酒”link 如果您点击它或滚动太迟钝,则不会收到 .active
class .
有办法解决这个问题吗?
需要如下规则:
- 总是只有最后观察到的对象才会触发
.active
class.
- 但是:如果在某一点上有不同的可观察对象可见
(例如,在点击 link“啤酒”之后),然后是“最
占主导地位的”一个(没有被切断并且最存在的那个)应该
触发
.active
class.
非常感谢您的帮助! <3
const mediaInViewport = Array.from(document.querySelectorAll('.media'));
const sections = Array.from(document.querySelector('#right').children);
const links = Array.from(document.querySelectorAll('.link'));
let actLink = links[0];
let actSection = null;
let targetLink = null;
let targetSection = null;
document.body.addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
event.preventDefault();
targetLink = event.target;
targetSection = sections.find(section => section.id === targetLink.href.slice(targetLink.href.lastIndexOf('#')+1))
location.hash = targetLink.href.slice(targetLink.href.lastIndexOf('#'));
actLink.classList.remove('active');
actLink = links.find(l => event.target.href === l.href)
actLink.classList.add('active');
}
}, false)
observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
const closestParent = entry.target.closest('section');
if (closestParent) {
actLink.classList.remove('active');
if (!targetLink) {
actLink = links.find(link =>
link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
)
} else {
if (closestParent === targetSection){
targetLink = null
}
}
actSection = sections.find(section => section.id === actLink.href.slice(actLink.href.lastIndexOf('#')))
actLink.classList.add('active');
}
}
});
}, {
threshold: 0.3
});
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // Wait for images to fully load
() => {
mediaInViewport.forEach((item) => {
observer.observe(item);
});
}, 1000);
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
}
body {
display: flex;
cursor: default;
}
#left,
#right {
width: 50%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
#left {
background-color: rgb(220, 220, 220);
}
#right {
background-color: rgb(200, 200, 200);
}
.media {
padding: 10px;
padding-bottom: 0;
}
.media:nth-last-child(1) {
margin-bottom: 10px;
}
img {
display: block;
width: 100%;
}
.link:active {
cursor: pointer;
}
a:target {
background-color: black;
color: white;
}
a {
text-decoration: none;
color: inherit;
}
section:target {
background-color: black;
color: white;
}
.active {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<a class="link active" href="#landscape">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#beer">Beer</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscape">
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
</section>
<section id="cats">
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
</section>
<section id="beer">
<article class="media beer">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Craft_Beer_at_the_Taedonggang_Microbrewery_No._3_%2812329931855%29.jpg">
</article>
</section>
<section id="food">
<article class="media food">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
</article>
</section>
</div>
到目前为止,这是我的代码:
const mediaInViewport = document.querySelectorAll('.media');
const links = Array.from(document.querySelectorAll('.link'));
let actLink = links[0];
document.body.addEventListener('click', (event) => {
if (event.target.tagName === 'a') {
actLink.classList.remove('active');
actLink = links.find(link => event.target.href === link.href)
actLink.classList.add('active');
}
}, false)
observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
const closestParent = entry.target.closest('section');
if (closestParent) {
actLink.classList.remove('active');
actLink = links.find(link =>
link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
)
actLink.classList.add('active');
}
}
});
}, {
threshold: 0
});
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // Wait for images to fully load
() => {
mediaInViewport.forEach((item) => {
observer.observe(item);
});
}, 1000);
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
text-decoration: none;
color: inherit;
}
body {
display: flex;
cursor: default;
}
#left,
#right {
width: 50%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
#left {
background-color: rgb(220, 220, 220);
}
#right {
background-color: rgb(200, 200, 200);
}
.media {
padding: 10px;
padding-bottom: 0;
}
.media:nth-last-child(1) {
margin-bottom: 10px;
}
img {
display: block;
width: 100%;
}
.link {
cursor: pointer;
}
.active {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<a class="link active" href="#landscape">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#beer">Beer</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscape">
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
</section>
<section id="cats">
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
</section>
<section id="beer">
<article class="media beer">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Craft_Beer_at_the_Taedonggang_Microbrewery_No._3_%2812329931855%29.jpg">
</article>
</section>
<section id="food">
<article class="media food">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
</article>
</section>
</div>
观察功能应该适用于所有 window 尺寸。目前,如果 window 尺寸稍大,例如“啤酒”link 如果您点击它或滚动太迟钝,则不会收到 .active
class .
有办法解决这个问题吗?
需要如下规则:
- 总是只有最后观察到的对象才会触发
.active
class. - 但是:如果在某一点上有不同的可观察对象可见
(例如,在点击 link“啤酒”之后),然后是“最
占主导地位的”一个(没有被切断并且最存在的那个)应该
触发
.active
class.
非常感谢您的帮助! <3
const mediaInViewport = Array.from(document.querySelectorAll('.media'));
const sections = Array.from(document.querySelector('#right').children);
const links = Array.from(document.querySelectorAll('.link'));
let actLink = links[0];
let actSection = null;
let targetLink = null;
let targetSection = null;
document.body.addEventListener('click', (event) => {
if (event.target.tagName === 'A') {
event.preventDefault();
targetLink = event.target;
targetSection = sections.find(section => section.id === targetLink.href.slice(targetLink.href.lastIndexOf('#')+1))
location.hash = targetLink.href.slice(targetLink.href.lastIndexOf('#'));
actLink.classList.remove('active');
actLink = links.find(l => event.target.href === l.href)
actLink.classList.add('active');
}
}, false)
observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
const closestParent = entry.target.closest('section');
if (closestParent) {
actLink.classList.remove('active');
if (!targetLink) {
actLink = links.find(link =>
link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
)
} else {
if (closestParent === targetSection){
targetLink = null
}
}
actSection = sections.find(section => section.id === actLink.href.slice(actLink.href.lastIndexOf('#')))
actLink.classList.add('active');
}
}
});
}, {
threshold: 0.3
});
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // Wait for images to fully load
() => {
mediaInViewport.forEach((item) => {
observer.observe(item);
});
}, 1000);
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
}
body {
display: flex;
cursor: default;
}
#left,
#right {
width: 50%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
#left {
background-color: rgb(220, 220, 220);
}
#right {
background-color: rgb(200, 200, 200);
}
.media {
padding: 10px;
padding-bottom: 0;
}
.media:nth-last-child(1) {
margin-bottom: 10px;
}
img {
display: block;
width: 100%;
}
.link:active {
cursor: pointer;
}
a:target {
background-color: black;
color: white;
}
a {
text-decoration: none;
color: inherit;
}
section:target {
background-color: black;
color: white;
}
.active {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<a class="link active" href="#landscape">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#beer">Beer</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscape">
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</div>
</section>
<section id="cats">
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Cute_cat_%281698598876%29.jpg">
</article>
</section>
<section id="beer">
<article class="media beer">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Craft_Beer_at_the_Taedonggang_Microbrewery_No._3_%2812329931855%29.jpg">
</article>
</section>
<section id="food">
<article class="media food">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1200px-Good_Food_Display_-_NCI_Visuals_Online.jpg">
</article>
</section>
</div>