Apakah mungkin untuk menggulir ke .project dan membuat latar belakang menjadi merah tanpa menggulir lambat dan dekat kelas .project?

Pada dasarnya saya ingin pengguna dapat menggulir dan menampilkan warna merah meskipun ia menggulir dengan cepat, tetapi ketika pengguna berada di atas atau di bawah projectPosition.top, latar belakang harus berwarna standar (hitam).

var project = document.getElementsByClassName('project')[0];
var projectPosition = project.getBoundingClientRect();

document.addEventListener('scroll', () => {

    var scrollY = window.scrollY;
    
    if (scrollY == projectPosition.top) {
        project.style.background = "red";
        project.style.height = "100vh";
    } else {
        project.style.background = "black";
        project.style.height = "200px";
    }
    
});
.top {
  height: 700px;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}
<div class="top"></div>
<div class="project"></div>
<div class="top"></div>

Terima kasih sebelumnya.

0
Hejha 29 Januari 2020, 23:56

2 jawaban

Jawaban Terbaik

Alih-alih mendengarkan acara gulir, Anda dapat menggunakan API Pengamat Intersection yang dapat memantau elemen yang masuk dan tidak terlihat. Setiap kali elemen yang diamati masuk atau keluar dari tampilan, fungsi panggilan balik diaktifkan di mana Anda dapat memeriksa apakah elemen telah masuk atau keluar dari tampilan, dan menanganinya dengan tepat.

Ini juga sangat berkinerja dan menyelamatkan Anda dari beberapa perhitungan atas dan tinggi. Lihat pada contoh di bawah ini.

Jika Anda memiliki pertanyaan tentang itu, beri tahu saya.

Ambang

Untuk memicu callback setiap kali elemen terlihat sepenuhnya, bukan sebagian, setel nilai opsi threshold ke [1]. Defaultnya adalah [0], artinya dipicu setiap kali elemen dilihat minimal 1px. [1] menyatakan bahwa 100% elemen harus dilihat untuk memicu. Nilainya dapat berkisar dari 0 hingga 1 dan dapat berisi beberapa titik pemicu. Sebagai contoh

const options = {
  threshold: [0, 0.5, 1]
};

Yang artinya, mulai, setengah jalan, dan sepenuhnya masuk ke tampilan.

const project = document.querySelector('.project');

const observerCallback = entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('red');
    } else {
      entry.target.classList.remove('red');
    }
  });
};

const options = {
  threshold: [1]
}

const observer = new IntersectionObserver(observerCallback, options);
observer.observe(project);
.top,
.bottom{
  height: 700px;
  width: 100%;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}

.project.red {
  background: red;
}
<div class="top"></div>
<div class="project"></div>
<div class="bottom"></div>
3
Emiel Zuurbier 29 Januari 2020, 21:57

Untuk membuatnya 'cepat' Anda sebaiknya menggunakan operator >= daripada ==:

var project = document.getElementsByClassName('project')[0];
var projectPosition = project.getBoundingClientRect();

document.addEventListener('scroll', () => {

    var scrollY = window.scrollY;
    if (scrollY >= projectPosition.top && scrollY <= projectPosition.top + projectPosition.height) {
        project.style.background = "red";
        project.style.height = "100vh";
    } else {
        project.style.background = "black";
        project.style.height = "200px";
    }
    
});
.top {
  height: 700px;
}

.project {
  background: black;
  height: 200px;
  width: 100%;
}
<div class="top"></div>
<div class="project"></div>
<div class="top"></div>
0
johannchopin 29 Januari 2020, 21:06