如何更改滾動部分？
[英]how to change section on scroll?
問題描述
我是 css 和 html 的新手。 我正在嘗試制作一頁項目，但是當我用鼠標滾輪向下時，我不知道如何更改該部分。 有誰能夠幫助我？
這是代碼：
section { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; color: white; background-color: black; visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } section.active { visibility: visible; }
<section data-section="0" class="active"> <h1>hello! I'm the first section!</h1> </section> <section data-section="1"> <h2>Hello! I'm the second section!</h2> </section> <section data-section="2"> <h2>Hello! I'm the third section!</h2> </section>
2 個解決方案
解決方案1
1 已采納 2019-04-09 23:01:32
我假設您希望單輪滾動刻度對應於部分更改。 無需使用 CSS 滾動捕捉或 jQuery 等外部庫，您只需使用一個輪子偵聽器即可實現目標。
currentSectionIndex - 1 >= 0和currentSectionIndex + 1 < sections.length條件可以防止后續的滾輪超過 HTML 部分的數量。
由於提供的 HTML 和 CSS 沒有變化，請參考所附的 JavaScript 作為解決方案。
let sections = document.getElementsByTagName('section'); // tracks index of current section let currentSectionIndex = 0; document.addEventListener('wheel', e => { if (e.wheelDeltaY > 0 && currentSectionIndex - 1 >= 0) { // wheel up sections[currentSectionIndex].className = ''; currentSectionIndex--; sections[currentSectionIndex].className = 'active'; } else if (e.wheelDeltaY < 0 && currentSectionIndex + 1 < sections.length) { // wheel down sections[currentSectionIndex].className = ''; currentSectionIndex++; sections[currentSectionIndex].className = 'active'; } });
section { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; color:white; background-color: black; visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } section.active { visibility: visible; }
<section data-section="0" class="active"> <h1>hello! I'm the first section!</h1> </section> <section data-section="1"> <h2>Hello! I'm the second section!</h2> </section> <section data-section="2"> <h2>Hello! I'm the third section!</h2> </section>
解決方案2
0 2019-04-09 22:35:27
我不是 jQuery 中的佼佼者，但這可以幫助我希望 :)
$(document).ready(function() { $('#body').bind('mousewheel', function(e) { if (e.originalEvent.wheelDelta / 120 > 0) { var num = $('.active').attr('data-section'); num--; if (num <= -1) { num = num + 3; } $('.active').removeClass('active'); $('section[data-section="' + num + '"]').addClass('active'); } else { var num = $('.active').attr('data-section'); num++; if (num >= 3) { num = 0; } $('.active').removeClass('active'); $('section[data-section="' + num + '"]').addClass('active'); } }); });
body { width: 100vw; height: 100vh; } section { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; color: white; background-color: black; visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } section.active { visibility: visible; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <body id="body"> <section data-section="0" class="active"> <h1>hello! I'm the first section!</h1> </section> <section data-section="1"> <h2>Hello! I'm the second section!</h2> </section> <section data-section="2"> <h2>Hello! I'm the third section!</h2> </section> </body>
當我們在網絡的特定部分上滾動時，如何更改元素的樣式？
[英]How to change the style of an element when we scroll over a particular section of a web?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.