Bagaimana menyelesaikan masalah jitter halaman yang disebabkan oleh unsur -unsur penetapan dinamik yang ditetapkan dalam JavaScript?

JavaScript secara dinamik menetapkan jitter halaman yang disebabkan oleh unsur tetap dan penyelesaian

Dalam JavaScript, position: fixed berdasarkan peristiwa menatal tetingkap boleh menyebabkan jitter halaman. Ini kerana perubahan ketinggian dalam kandungan halaman mencetuskan susun atur dan menyusun semula, menyebabkan kelipan visual. Berikut adalah senario biasa:

 window.addeventListener ('tatal', this.handetabfix);

HandLetAbfix () {
  biarkan timeout = null;
  clearTimeout (tamat masa);
  timeout = setTimeout (() => {
    const scrollTop = window.pageyOffset || document.documentelement.scrolltop || document.body.scrolltop;
    const offsettop = document.QuerySelector ('#testNavbar') ?. Offsettop 60;
    this.isfixTAB = scrollTop> offsettop;
    // Bila ini.isfixtab adalah benar, tetapkan elemen ke diperbaiki
  }, 1000);
}

Dalam kod itu, acara tatal mencetuskan fungsi handleTabFix , dan menentukan sama ada untuk menetapkan elemen untuk fixed berdasarkan kedudukan tatal. Walau bagaimanapun, pendekatan ini boleh menyebabkan perubahan berulang dalam ketinggian halaman, menyebabkan gegaran.

Jitter semacam ini biasanya kerana selepas elemen menjadi fixed , ketinggian kandungan halaman berkurangan, menyebabkan halaman untuk mengira semula ketinggian, yang seterusnya mencetuskan kemas kini penerbitan dan mengulangi kitaran.

Terdapat dua penyelesaian utama:

1. Gunakan position: sticky : Tukar kaedah kedudukan elemen sticky . Kedudukan sticky menggabungkan ciri -ciri relative dan fixed . Unsur ini secara automatik akan menjadi fixed selepas mencapai offset yang ditentukan, tetapi tidak akan menjejaskan ketinggian keseluruhan halaman, dengan itu mengelakkan jitter.

2. Tambah bekas ketinggian tetap untuk elemen: Tambahkan bekas induk untuk elemen yang perlu ditetapkan untuk fixed dan tetapkan ketinggian tetap untuk bekas. Dengan cara ini, walaupun elemen menjadi fixed , bekas masih menduduki ruang asal, menghalang ketinggian halaman dari berubah, dengan itu menghapuskan jitter.

Memilih mana -mana kaedah di atas dapat menyelesaikan masalah jitter halaman dengan berkesan apabila menetapkan kedudukan elemen fixed dalam JavaScript secara dinamik, meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana menyelesaikan masalah jitter halaman yang disebabkan oleh unsur -unsur penetapan dinamik yang ditetapkan dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!