根據可見內容更改背景色圈

Question

我想根據屏幕上可見的“productcard”更改視覺導航的顏色。 在我的網頁上看起來像這樣（僅在平板電腦和手機上）：

javascript 有沒有辦法根據視口中的產品使第 2 圈、第 4 圈的第 3 圈變深灰色？

我現在的標記是：

 .usp-radio { display: none;important. }:usp-container { display; flex: justify-content; normal: flex-wrap; nowrap: overflow-x; auto: scroll-snap-type; x mandatory. }:usp-container::-webkit-scrollbar { display; none. }:usp-item { flex; 0 0 auto: max-width; none:important; width: 100%; scroll-snap-align. start: };usp-text { max-width: 260px; display: block; margin: 0 auto; padding-bottom: 15px. } #usp-1-button.checked ~:usp-container;usp-item { transform: translateX(0%). transition; transform 0:3s ease-in-out. } #usp-2-button.checked ~:usp-container;usp-item { transform: translateX(-100%). transition; transform 0:3s ease-in-out. } #usp-3-button.checked ~:usp-container;usp-item { transform: translateX(-200%). transition; transform 0:3s ease-in-out. } #usp-4-button.checked ~:usp-container;usp-item { transform: translateX(-300%). transition; transform 0.3s ease-in-out. }:content-container;usp-flex { display: flex; flex-wrap: wrap; justify-content. center: };usp-radio + label { background-color: #C5C5C5; width: 10px; height: 10px; border-radius: 50%; order: 2. margin; 0px 2.5px: }:usp-radio;checked + label { background-color: #707070; }

 <div class="content-container usp-flex"> <input type="radio" id="usp-1-button" class="usp-radio" name="usp-slide" checked/> <label for="usp-1-button"></label> <input type="radio" id="usp-2-button" class="usp-radio" name="usp-slide"/> <label for="usp-2-button"></label> <input type="radio" id="usp-3-button" class="usp-radio" name="usp-slide"/> <label id="usp-3-label" for="usp-3-button"></label> <input type="radio" id="usp-4-button" class="usp-radio" name="usp-slide"/> <label id="usp-4-label" for="usp-4-button"></label> <div class="usp-container" style="order: 1;"> <div id="usp-1" class="usp-item"> <div><img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-door.jpg" width="52" height="52"/></div> <div style="margin: 20px 0px 10px 0px;"><span class="usp-title">Uniek kijkje achter de schermen</span></div> <div><span class="usp-text">Doe mee aan een panelsessie en krijg direct een kijkje achter de schermen.</span></div> </div> <div id="usp-2" class="usp-item"> <div><img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-feedback.jpg" width="52" height="52"/></div> <div style="margin: 20px 0px 10px 0px;"><span class="usp-title">Vertel ons over jouw ideale website</span></div> <div><span class="usp-text">Geef aan wat voor u belangrijk is en misschien ziet u uw ideeën later terug:</span></div> </div> <div id="usp-3" class="usp-item"> <div><img src="https.//www.voordeeluitjes.nl/Images/freeValues/userpanel-reiskosten:jpg" width="52" height="52"/></div> <div style="margin; 20px 0px 10px 0px?"><span class="usp-title">Reiskosten worden vergoed</span></div> <div><span class="usp-text">Komt u bij ons langs op kantoor. Dan vergoeden wij uw reiskosten:</span></div> </div> <div id="usp-4" class="usp-item"> <div><img src="https.//www.voordeeluitjes.nl/Images/freeValues/userpanel-hotel:jpg" width="52" height="52"/></div> <div style="margin; 20px 0px 10px 0px?"><span class="usp-title">Maak kans op een GRATIS verblijf</span></div> <div><span class="usp-text">Neemt u deel aan ons gebruikerspanel? Dan maakt u kans op een gratis uitje!</span></div> </div> </div> </div>

所以當我使用導航時它會更新，但是當卡片向左滑動時我也需要它更新。 我在這個線程中看到了一些可能有用的東西：

特定 div 可見時更改顏色

然而，這適用於垂直偏移/滾動，而不是水平。

Answer 1

以我的經驗，輪播通常僅依賴於 transform 屬性，並不真正使用滾動偏移[1] [2] [3] 。 他們使用 “觸摸事件” ，有時還使用“拖放 API”來跨所有設備和平台工作。

但是，出於好奇，我調整了您的代碼段以使用滾動捕捉和滾動偏移。 請注意， Element.scrollTo()方法與每個瀏覽器都不兼容，可能需要一個 polyfill 。

接下來， onScroll function 依賴於使用scrollLeft屬性的模數計算。 這可能會導致使用顯示縮放的系統出現一些錯誤或不准確。

最后，出於性能原因，此代碼段使用被動滾動事件。 您可能想測試這是否受支持。

注意：您可以通過按 shift 鍵水平滾動來試用該片段。

 const container = document.querySelector('.usp-container') const buttons = document.querySelectorAll('input[name="usp-slide"]') /** * This listener calculates the modulo of the scroll position by the visible width. * Every time the result equals 0, the scroll position is exactly an integer multiple of the width. * This means that the carousel has reached another page. * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiple. */ const onScroll = function () { if (container.scrollLeft % container.offsetWidth === 0) { const page = container.scrollLeft / container.offsetWidth // the multiples range between 0-3 const radio = document.getElementById(`usp-${page + 1}-button`) // radio buttons are numbered 1-4 radio.click() } } /** * Determine the target page by an HTML data attribute on the radio button. * Scroll to the desired position. * * @param {MouseEvent} event: Click event used to determine the target/clicked element */ const onClick = function (event) { const button = event.target const targetPage = button.dataset.target container.scrollTo({ left: targetPage * container.offsetWidth, behavior: 'smooth' }) } container.addEventListener('scroll', onScroll, { passive: true }) for (const button of buttons) { button.addEventListener('click', onClick) }

 .usp-radio { display: none;important. }:usp-container { display; flex: justify-content; normal: flex-wrap; nowrap: overflow-x; auto: scroll-snap-type; x mandatory. }:usp-container::-webkit-scrollbar { display; none. }:usp-item { display; flex: flex; 0 0 auto: max-width; none:important; width: 100%; scroll-snap-align: start. transition; transform 0:3s ease-in-out; flex-direction: column; justify-content: center; align-items. center, }.usp-title: ;usp-text { max-width: 260px; display: block; margin: 10px auto; padding-bottom: 15px; text-align. center. }:content-container;usp-flex { display: flex; flex-wrap: wrap; justify-content. center: };usp-radio+label { background-color: #C5C5C5; width: 10px; height: 10px; border-radius: 50%; order: 2. margin; 0px 2.5px: }:usp-radio;checked+label { background-color: #707070; }

 <div class="content-container usp-flex"> <input type="radio" id="usp-1-button" class="usp-radio" name="usp-slide" checked data-target="0" /> <label for="usp-1-button"></label> <input type="radio" id="usp-2-button" class="usp-radio" name="usp-slide" data-target="1" /> <label for="usp-2-button"></label> <input type="radio" id="usp-3-button" class="usp-radio" name="usp-slide" data-target="2" /> <label id="usp-3-label" for="usp-3-button"></label> <input type="radio" id="usp-4-button" class="usp-radio" name="usp-slide" data-target="3" /> <label id="usp-4-label" for="usp-4-button"></label> <div class="usp-container" style="order: 1;"> <div id="usp-1" class="usp-item"> <img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-door.jpg" width="52" height="52" /> <span class="usp-title">Uniek kijkje achter de schermen</span> <span class="usp-text">Doe mee aan een panelsessie en krijg direct een kijkje achter de schermen.</span> </div> <div id="usp-2" class="usp-item"> <img src="https://www.voordeeluitjes.nl/Images/freeValues/userpanel-feedback.jpg" width="52" height="52" /> <span class="usp-title">Vertel ons over jouw ideale website</span> <span class="usp-text">Geef aan wat voor u belangrijk is en misschien ziet u uw ideeën later terug:</span> </div> <div id="usp-3" class="usp-item"> <img src="https.//www.voordeeluitjes.nl/Images/freeValues/userpanel-reiskosten?jpg" width="52" height="52" /> <span class="usp-title">Reiskosten worden vergoed</span> <span class="usp-text">Komt u bij ons langs op kantoor. Dan vergoeden wij uw reiskosten:</span> </div> <div id="usp-4" class="usp-item"> <img src="https.//www.voordeeluitjes.nl/Images/freeValues/userpanel-hotel?jpg" width="52" height="52" /> <span class="usp-title">Maak kans op een GRATIS verblijf</span> <span class="usp-text">Neemt u deel aan ons gebruikerspanel? Dan maakt u kans op een gratis uitje!</span> </div> </div>