javascript - 基于 clientHeight 的 Intersection Observer 更改类
问题描述
单击红色条以推进幻灯片：
var elem = document.querySelector(".hero-hero-md .slider-float-jumbotron-floating-, .hero-lg.jumbotron-float, .hero-md.jumbotron-float, .hero-sm.jumbotron-float");
var style = document.querySelector(".field--name-field-description").style;
var element = this.document.querySelector(".field--name-field-description");
var elements = document.querySelectorAll(".field--name-field-description");
if ((elem.clientHeight >= 432) && (document.querySelector('.hero-hero-md .slider-float-jumbotron-floating-'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
const options = {
root: null,
rootMargin: '0px',
threshold: .5,
/* required options*/
trackVisibility: true,
delay: 100 // minimum 100
};
const sliders = document.querySelectorAll('.slider-float-jumbotron-floating-');
const observer = new IntersectionObserver(entries => {
entries.forEach(function(entry,index) {
if((entry.isIntersecting) && (element.clientHeight < 432)) {
console.log('Intersecting',index);
entry.target.classList.toggle('align-items-end',false);
console.log('If client Height is' + " " + element.clientHeight + " " + 'add start');
} else {
console.log('Leave',index);
entry.target.classList.toggle('align-items-start',true);
console.log('Else client height is' + " " + element.clientHeight + " " + 'add end');
}
})
}, options);
sliders.forEach(slider => observer.observe(slider));
console.log(observer);
console.log(sliders);
}
} else if((elem.clientHeight >= 530) && (document.querySelector('.hero-lg.jumbotron-float'))) {
if((typeof(elem) != 'undefined' && elem != null)) {
//element.style.setProperty('--fade', 'linear-gradient(to bottom, black 70%, transparent 100%');
//element.style.setProperty('mask-image', 'none', 'important');
//var sliders = document.getElementsByClassName("slider-float-jumbotron-floating-");
for (var i = 0; i < sliders.length; i++) {
if (document.querySelector('.field--name-field-description').clientHeight > 530) {
sliders[i].classList.replace("align-items-end", "align-items-start");
}
}
}
} else if ((elem.clientHeight >= 432) && (document.querySelector('.hero-md.jumbotron-float'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
// element.style.setProperty('--fade', 'linear-gradient(to bottom, black 65%, transparent 100%');
// Loop over each class
//var sliders = document.getElementsByClassName("slider-float-jumbotron-floating-");
for (var i = 0; i < sliders.length; i++) {
if (document.querySelector('.field--name-field-description').clientHeight > 432) {
sliders[i].classList.replace("align-items-end", "align-items-start");
}
}
}
} else if ((elem.clientHeight >= 250) && (document.querySelector('.hero-sm.jumbotron-float'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
//element.style.setProperty('--fade', 'linear-gradient(to bottom, black 50%, transparent 100%');
//element.style.setProperty('mask-image', 'none', 'important');
//var sliders = document.getElementsByClassName("slider-float-jumbotron-floating-");
for (var i = 0; i < sliders.length; i++) {
if (document.querySelector('.field--name-field-description').clientHeight > 250) {
sliders[i].classList.replace("align-items-end", "align-items-start");
}
}
}
} else {
//element.style.setProperty('--fade', 'none');
}
'use strict';
var heroSlideshowTabs;
if (heroSlideshowTabs === undefined) {
heroSlideshowTabs = 0;
}
function getHeroSlideshowId() {
var ret = heroSlideshowTabs;
heroSlideshowTabs += 1;
return ret;
}
function initSlideshows() {
function getSlides(slideshow) {
return slideshow.querySelector('div.field--name-field-slides').children;
}
function slide(slideshow, data, increment) {
var slides = getSlides(slideshow);
var nextActive = ((data.active + increment) % slides.length + slides.length) % slides.length;
jump(slideshow, data, nextActive);
}
function jump(slideshow, data, destination) {
if (data.active === destination) {
return;
}
var slides = getSlides(slideshow);
slides[data.active].classList.remove('active');
slides[data.active].setAttribute('aria-expanded', 'false');
slides[data.active].setAttribute('aria-hidden', 'true');
slides[destination].classList.add('active');
slides[destination].setAttribute('aria-expanded', 'true');
slides[destination].removeAttribute('aria-hidden');
var dots = slideshow.querySelector('div.slideshow-dots').children;
dots[data.active].classList.remove('active');
dots[data.active].setAttribute('aria-selected', 'false');
dots[destination].classList.add('active');
dots[destination].setAttribute('aria-selected', 'true');
data.active = destination;
}
function createIcon(name) {
var icon = document.createElement('i');
icon.classList.add('fa');
icon.classList.add('fa-' + name);
icon.setAttribute('aria-hidden', 'true');
return icon;
}
var slideshows = document.querySelectorAll('div.paragraph--type--hero-slideshow');
slideshows.forEach((slideshow) => {
var data = {
active: 0
};
var slides = slideshow.querySelector('div.field--name-field-slides').children;
slides[0].classList.add('active');
slides[0].setAttribute('aria-expanded', 'true');
for (var k = 1; k < slides.length; k++) {
slides[k].setAttribute('aria-expanded', 'false');
slides[k].setAttribute('aria-hidden', 'true');
}
for (var k = 0; k < slides.length; k++) {
slides[k].setAttribute('role', 'tab');
slides[k].id = 'hero-slideshow-panel-' + getHeroSlideshowId();
slides[k].setAttribute('aria-labelledby', slides[k].id.replace('panel', 'tab'));
}
var controls = document.createElement('div');
controls.classList.add('slideshow-controls');
slideshow.appendChild(controls);
var buttonLeft = document.createElement('button');
buttonLeft.classList.add('slideshow-arrow');
buttonLeft.classList.add('slideshow-left');
buttonLeft.type = 'button';
buttonLeft.setAttribute('aria-label', 'Previous');
buttonLeft.appendChild(createIcon('chevron-left'));
buttonLeft.onclick = (e) => slide(slideshow, data, -1);
controls.appendChild(buttonLeft);
var buttonRight = document.createElement('button');
buttonRight.classList.add('slideshow-arrow');
buttonRight.classList.add('slideshow-right');
buttonRight.type = 'button';
buttonRight.setAttribute('aria-label', 'Next');
buttonRight.appendChild(createIcon('chevron-right'));
buttonRight.onclick = (e) => slide(slideshow, data, 1);
controls.appendChild(buttonRight);
var dots = document.createElement('div');
dots.classList.add('slideshow-dots');
dots.setAttribute('role', 'tablist');
controls.appendChild(dots);
for (let k = 0; k < slides.length; k++)
{
var dot = document.createElement('button');
dot.id = slides[k].getAttribute('aria-labelledby');
dot.classList.add('slideshow-dot');
dot.type = 'button';
dot.setAttribute('aria-label', 'Go to Slide ' + (k + 1));
dot.setAttribute('role', 'tab');
dot.setAttribute('aria-selected', 'false');
dot.setAttribute('aria-controls', slides[k].id);
dot.onclick = (e) => jump(slideshow, data, k);
dots.appendChild(dot);
}
dots.firstElementChild.classList.add('active');
dots.firstElementChild.setAttribute('aria-selected', 'true');
});
}
initSlideshows();/*------------------------------------*\ $HEROES \*------------------------------------*/
.hero {
overflow: hidden;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero.jumbotron-float .jumbotron-wrap {
height: auto;
background-color: rgba(0, 0, 0, 0.5);
max-width: 50%;
}
@media (min-width: 576px) {
.hero.jumbotron-float .jumbotron-wrap {
background-color: transparent;
}
}
@media (max-width: 576px) {
.hero.jumbotron-float .jumbotron-wrap {
min-width: 100%;
min-height: 100%;
padding: 0;
margin: 0 !important;
padding-left: 10% !important;
padding-right: 10% !important;
}
}
.hero.jumbotron-float .jumbotron {
background-color: transparent;
max-height: 100%;
}
@media (min-width: 576px) {
.hero.jumbotron-float .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
.hero.jumbotron-full-height .jumbotron-wrap {
background-color: rgba(0, 0, 0, 0.5);
}
.hero.jumbotron-full-height .jumbotron {
background-color: transparent;
}
.hero-sm.jumbotron-float img {
height: 250px;
}
.jumbotron-wrap {
max-width: 50%;
}
.jumbotron-wrap.jumbotron-full-height img {
height: 250px;
}
@media (min-width: 576px) {
.jumbotron-wrap.jumbotron-full-height .jumbotron-wrap {
height: 250px;
}
}
.hero-md.jumbotron-float img {
height: 432px;
}
.jumbotron-wrap {
max-width: 50%;
}
.jumbotron-wrap.jumbotron-full-height img {
height: 432px;
}
@media (min-width: 576px) {
.jumbotron-wrap.jumbotron-full-height .jumbotron-wrap {
height: 432px;
}
}
.hero-lg.jumbotron-float img {
height: 530px;
}
.jumbotron-wrap {
max-width: 50%;
}
.jumbotron-wrap.jumbotron-full-height img {
height: 530px;
}
@media (min-width: 576px) {
.jumbotron-wrap.jumbotron-full-height .jumbotron-wrap {
height: 530px;
}
}
.hero.jumbotron-full-height img {
height: 432px;
}
.hero-sm .slider-float-jumbotron-floating- .jumbotron img {
height: 250px;
}
.hero-sm .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: transparent;
max-height: 250px;
}
@media (min-width: 576px) {
.hero-sm .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 576px) {
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron img .float-left {
display: none !important;
}
}
@media (min-width: 576px) {
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
height: 432px;
padding: 4px !important;
max-width: 33%;
}
}
@media (max-width: 576px) {
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
padding: 0 32px 0 32px !important;
max-width: 100%;
}
}
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent !important;
}
.hero-md .slider-float-jumbotron-floating- .jumbotron img {
height: 432px;
}
.hero-md .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: transparent;
max-height: 432px;
}
@media (min-width: 576px) {
.hero-md .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 576px) {
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron img .float-left {
display: none !important;
}
}
@media (min-width: 576px) {
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
height: 432px;
padding: 4px !important;
max-width: 33%;
}
}
@media (max-width: 576px) {
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
padding: 0 32px 0 32px !important;
max-width: 100%;
}
}
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent !important;
}
.hero-lg .slider-float-jumbotron-floating- .jumbotron img {
height: 530px;
}
.hero-lg .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: transparent;
max-height: 530px;
}
@media (min-width: 576px) {
.hero-lg .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 576px) {
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron img .float-left {
display: none !important;
}
}
@media (min-width: 576px) {
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
height: 432px;
padding: 4px !important;
max-width: 33%;
}
}
@media (max-width: 576px) {
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
padding: 0 32px 0 32px !important;
max-width: 100%;
}
}
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent !important;
}
@media (max-width: 576px) {
.slider-float-jumbotron-floating- .jumbotron-wrap {
min-width: 100%;
min-height: 100%;
padding: 0;
margin: 0 !important;
padding-left: 10% !important;
padding-right: 10% !important;
}
}
.paragraph--type--hero-slideshow img {
height: 432px;
object-fit: cover;
width: 100%;
}
.paragraph--type--hero-slideshow .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
.slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent;
}
@media (max-width: 576px) {
.slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
padding: 79px;
}
}
.slider-full-height-jumbotron-full-height- .jumbotron-wrap {
height: 432px;
}
@media (max-width: 576px) {
.slider-full-height-jumbotron-full-height- .jumbotron-wrap {
max-width: 100%;
}
}
@media (max-width: 576px) {
.slider-full-height-jumbotron-full-height-.jumbotron img.float-left {
display: none;
}
}
.slider-float-jumbotron-floating- .jumbotron-wrap .field.field--name-field-description {
--fade: none;
mask-image: var(--fade);
-webkit-mask-image: var(--fade);
-webkit-mask-size: 100% 100%;
}
/*-------------------------------------------*\ HERO SLIDER \*-------------------------------------------*/
div.view-hero div.views-row {
width: 100%;
}
slideshow div.paragraph--type--hero-slideshow {
position: relative;
}
div.slideshow-controls {
width: 100%;
height: 50%;
}
div.slideshow-controls button {
cursor: pointer;
}
div.slideshow-controls button.slideshow-arrow {
position: absolute;
top: 0;
width: 48px;
height: 100%;
border: none;
background-color: red;
}
div.slideshow-controls button.slideshow-arrow:active {
background-color: transparent;
color: lightgrey;
}
div.slideshow-controls button.slideshow-left {
left: 0;
color: #000;
}
div.slideshow-controls button.slideshow-arrow.slideshow-left:focus {
outline: none;
}
div.slideshow-controls button.slideshow-right {
right: 0;
color: #000;
}
div.slideshow-controls button.slideshow-arrow.slideshow-right:focus {
outline: none;
}
div.slideshow-controls div.slideshow-dots {
display: none;
}
div.paragraph--type--hero-slideshow > div.field--name-field-slides > div.field__item {
position: absolute;
left: -999em;
}
div.paragraph--type--hero-slideshow > div.field--name-field-slides > div.field__item.active {
position: relative;
left: 0;
}
div.HeroSlideshow-container {
position: relative;
}
/* Fading animation */
.HeroFades {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes HeroFades {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes HeroFades {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.HeroSlides {
text-align: center;
}
.HeroSlides img {
height: 400px;
width: 100%;
}
.HeroSlides .slider {
position: relative;
display: inline-block;
}
.HeroSlidePrev, .HeroSlideNext {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.HeroSlideNext {
right: 0;
border-radius: 3px 0 0 3px;
}
.HeroSlidePrev:hover, .HeroSlideNext:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.svg-inline--fa {
font-size: 1.7em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="paragraph paragraph--type--hero-slideshow paragraph--view-mode--default hero-hero-md">
<div class="field field--name-field-slides field--type-entity-reference-revisions field--label-hidden field__items">
<div class="field__item active" aria-expanded="true" role="tab" id="hero-slideshow-panel-0" aria-labelledby="hero-slideshow-tab-0"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div class="field__item">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default justify-content-center align-items-end position-relative row d-flex">
<div class="col-12 px-0">
<img src="/sites/m1acsf.dd/files/2020-08/bigstock-Downtown-La-Skyline-Cityscape-109918208.jpg" alt="Downtown Los Angeles Skyline">
</div>
<div class="jumbotron-wrap px-4 m-5 position-absolute d-flex align-items-center">
<div class="jumbotron text-white m-0 p-4 rounded-0 position-relative">
<div class="clearfix text-formatted field field--name-field-description field--type-text-long field--label-hidden field__item"><p><span class="display-4">Welcome!</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Tempor id eu nisl nunc mi ipsum faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Turpis nunc eget lorem dolor sed viverra. </p>
<p><a class="btn btn-default" href="#"><span class="text">A Button</span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="field__item" aria-expanded="false" role="tab" id="hero-slideshow-panel-1" aria-labelledby="hero-slideshow-tab-1" aria-hidden="true"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div class="field__item">
<div class="slider-full-height-jumbotron-full-height- paragraph--view-mode--default jumbotron secondary-bg p-0 m-0">
<div class="row d-flex align-items-center">
<div class="col-sm-4 col-12 px-0">
<img class="float-left" src="/sites/m1acsf.dd/files/2020-08/photo-1480498073050-4c6abeee90c1.jpeg" alt="Sepia City of LA">
</div>
<div class="col-sm-8 jumbotron-wrap p-0 p-sm-4 d-flex align-items-center">
<div class="jumbotron text-white m-0 py-4 rounded-0">
<div class="clearfix text-formatted field field--name-field-description field--type-text-long field--label-hidden field__item"><p><span class="display-4"><span> </span>Welcome!</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Tempor id eu nisl nunc mi ipsum faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Turpis nunc eget lorem dolor sed viverra. </p>
<p><a class="btn btn-default" href="#"><span class="text">A Button</span></a></p></div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="field__item" aria-expanded="false" role="tab" id="hero-slideshow-panel-2" aria-labelledby="hero-slideshow-tab-2" aria-hidden="true"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div>
<div class="col-12 px-0">
<img src="/sites/m1acsf.dd/files/2020-08/pier.jpg" alt="Picture of a Pier">
</div>
</div>
</div>
<div class="field__item" aria-expanded="false" role="tab" id="hero-slideshow-panel-3" aria-labelledby="hero-slideshow-tab-3" aria-hidden="true"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div class="field__item">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default justify-content-start align-items-end position-relative row d-flex">
<div class="col-12 px-0">
<img src="/sites/m1acsf.dd/files/2020-08/Los-Angeles-Wallpaper-1.jpg" alt="la">
</div>
<div class="jumbotron-wrap px-4 m-5 position-absolute d-flex align-items-center">
<div class="jumbotron text-white m-0 p-4 rounded-0 position-relative">
<div class="clearfix text-formatted field field--name-field-description field--type-text-long field--label-hidden field__item"><p><span class="display-4"> Welcome!</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Tempor id eu nisl nunc mi ipsum faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Turpis nunc eget lorem dolor sed viverra. </p>
<p><a class="btn btn-default" href="#"><span class="text">A Button</span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="slideshow-controls"><button class="slideshow-arrow slideshow-left" type="button" aria-label="Previous"><i class="fa fa-chevron-left" aria-hidden="true"></i></button><button class="slideshow-arrow slideshow-right" type="button" aria-label="Next"><i class="fa fa-chevron-right" aria-hidden="true"></i></button><div class="slideshow-dots" role="tablist"><button id="hero-slideshow-tab-0" class="slideshow-dot active" type="button" aria-label="Go to Slide 1" role="tab" aria-selected="true" aria-controls="hero-slideshow-panel-0"></button><button id="hero-slideshow-tab-1" class="slideshow-dot" type="button" aria-label="Go to Slide 2" role="tab" aria-selected="false" aria-controls="hero-slideshow-panel-1"></button><button id="hero-slideshow-tab-2" class="slideshow-dot" type="button" aria-label="Go to Slide 3" role="tab" aria-selected="false" aria-controls="hero-slideshow-panel-2"></button><button id="hero-slideshow-tab-3" class="slideshow-dot" type="button" aria-label="Go to Slide 4" role="tab" aria-selected="false" aria-controls="hero-slideshow-panel-3"></button></div></div></div>
</body>
</html>我正在尝试将 clientHeight 与 Intersection Observer 一起使用，当 div 的 clientHeight 更改替换基于 div 的类大于或等于 X 时。我一切正常，它可以在第一页加载时读取 div 的高度，但之后我得到一个恒定的高度，这不是我定位的 div 的高度，并且类没有被应用。我尝试使用它和 querySelectorAll 但没有任何效果。这甚至可能吗？有人可以告诉我我做错了什么吗？
var elem = document.querySelector(".hero-hero-md .slider-float-jumbotron-floating-, .hero-lg.jumbotron-float, .hero-md.jumbotron-float, .hero-sm.jumbotron-float");
var style = document.querySelector(".field--name-field-description").style;
var element = document.querySelector(".field--name-field-description");
var elements = this.document.querySelectorAll(".field--name-field-description");
if ((elem.clientHeight >= 432) && (document.querySelector('.hero-hero-md .slider-float-jumbotron-floating-'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
const options = {
root: null,
rootMargin: '0px',
threshold: .5,
/* required options*/
trackVisibility: true,
delay: 100 // minimum 100
};
const observer = new IntersectionObserver(entries => {
entries.forEach(function(entry,index) {
if((entry.isIntersecting) && (document.querySelector(".jumbotron-wrap").clientHeight < 432)) {
console.log('Intersecting',index);
sliders.forEach(slider => slider.classList.toggle('align-items-end','align-items-start'));
console.log('If client Height is' + " " + document.querySelector(".jumbotron-wrap").clientHeight + " " + 'add start');
} else if (document.querySelector(".jumbotron-wrap").clientHeight >= 432){
console.log('Leave',index);
sliders.forEach(slider => slider.classList.toggle('align-items-start','align-items-end'));
console.log('Else client height is' + " " + document.querySelectorAll(".jumbotron-wrap").clientHeight + " " + 'add end');
}
})
}, options);
const sliders = document.querySelectorAll('.slider-float-jumbotron-floating-');
sliders.forEach(slider => observer.observe(slider));
console.log(observer);
console.log(sliders);
}
输出（230 是唯一正确的高度，其余为 206 且不正确）
解决方案
推荐阅读
- ios - 在 switch case 语句中获取 segue.destination 作为视图控制器
- pdo - PDO 代码不能在 000webhost 上运行，但可以在 localhost 上运行
- javascript - 如何分析无限嵌套的公式？
- linux - 如何在 Lisp 中加载 cl-libusb 库而不会出现“-no-pie”cc 错误？
- node.js - Fabric Node SDK - 违反实例化策略：签名集不满足策略
- java - 使用 jna 获取 IShellFolder
- css - How to convert color code into actual color
- javascript - 首次输入符号后输入失去焦点
- jquery-selectors - 选择具有相同超元素类的不同元素类型
- yii - 如何在控制器中的邮件下呈现视图？