Bagaimana untuk menetapkan dan mengawal kedudukan bar skrol dalam javascript

Dalam pembangunan bahagian hadapan, selalunya perlu menetapkan kedudukan bar skrol halaman supaya kedudukan yang ditentukan boleh diletakkan dengan tepat apabila halaman ditatal. Dalam JavaScript, anda boleh menetapkan dan mengawal kedudukan bar skrol melalui beberapa kaedah Artikel ini akan memperkenalkan kaedah ini.

Dapatkan kedudukan bar skrol

Sebelum menetapkan kedudukan bar skrol, anda perlu mendapatkan kedudukan bar skrol halaman semasa dahulu. Dalam JavaScript, anda boleh mendapatkan kedudukan bar skrol melalui dua atribut berikut:

• window.pageXOffset atau window.scrollX: dapatkan kedudukan bar skrol mendatar halaman.
• window.pageYOffset atau window.scrollY: Dapatkan kedudukan bar skrol menegak halaman.

Kedua-dua atribut ini mengembalikan nilai angka, mewakili nilai piksel. Contohnya, jika halaman menatal ke bawah 100 piksel, nilai window.pageYOffset akan bersamaan dengan 100.

Tetapkan kedudukan bar skrol

Selepas mendapatkan kedudukan bar skrol, anda boleh menggunakan beberapa kaedah untuk menetapkan kedudukan bar skrol. Kaedah

kaedah tatal()

scroll() boleh digunakan untuk menetapkan kedudukan bar tatal halaman. Kaedah ini menerima dua parameter: jarak tatal mendatar dan jarak tatal menegak, sepadan dengan atribut scrollLeft dan scrollTop halaman masing-masing. Contohnya, kod berikut menetapkan kedudukan bar skrol halaman untuk menatal 100 piksel secara mendatar dan 200 piksel secara menegak: kaedah

window.scroll(100, 200);

kaedah scrollTo()

scrollTo() kaedah dan scroll() Kaedahnya serupa dan juga boleh digunakan untuk menetapkan kedudukan bar skrol halaman. Walau bagaimanapun, kaedah scrollTo() lebih biasa digunakan kerana ia boleh menerima objek sebagai parameter untuk mengawal kedudukan bar skrol dengan lebih fleksibel. Objek ini mengandungi dua atribut: left dan top, yang sepadan dengan atribut scrollLeft dan scrollTop halaman masing-masing. Sebagai contoh, kod berikut menetapkan kedudukan bar skrol halaman untuk menatal 100 piksel secara mendatar dan 200 piksel secara menegak: Kaedah

window.scrollTo({ left: 100, top: 200 });

kaedah scrollBy()

scrollBy() juga Digunakan untuk tetapkan kedudukan bar tatal halaman, tetapi tidak seperti dua kaedah pertama, parameter kaedah scrollBy() mewakili jarak tatal relatif, bukan jarak tatal mutlak. Contohnya, kod berikut menatal halaman secara menegak sebanyak 100 piksel:

window.scrollBy(0, 100);

kaedah scrollIntoView() Kaedah

scrollIntoView() menatal elemen yang ditentukan ke dalam kawasan yang boleh dilihat. Kaedah ini menerima nilai Boolean sebagai parameter pilihan, menunjukkan sama ada akan menggunakan kesan animasi untuk menatal ke kedudukan yang ditentukan. Sebagai contoh, kod berikut menatal elemen perenggan pertama dalam dokumen HTML ke kawasan yang boleh dilihat:

document.getElementsByTagName('p')[0].scrollIntoView();

Dalam kod di atas, jika parameter pilihan tidak digunakan, tidak akan ada kesan animasi secara lalai .

Isu keserasian

Apabila menggunakan kaedah di atas untuk menetapkan kedudukan bar skrol, anda perlu memberi perhatian kepada isu keserasian penyemak imbas yang berbeza. Antaranya, pelayar IE menyokong menetapkan kedudukan bar skrol kepada nilai perpuluhan, tetapi pelayar arus perdana lain tidak menyokongnya. Jika anda perlu mencapai kesan yang konsisten dalam penyemak imbas yang berbeza, anda boleh menggunakan kaedah berikut:

function setScrollPosition(left, top) {
    if (typeof window.scrollTo === 'function') {
        window.scrollTo(left, top);
    } else if (typeof document.documentElement.scrollTop === 'number' && typeof document.documentElement.scrollLeft === 'number') {
        document.documentElement.scrollTop = top;
        document.documentElement.scrollLeft = left;
    } else {
        document.body.scrollTop = top;
        document.body.scrollLeft = left;
    }
}

Kaedah ini terlebih dahulu akan menentukan sama ada penyemak imbas menyokong kaedah scrollTo() Jika ia berlaku, ia akan memanggil terus kaedah ini untuk menetapkan kedudukan Bar skrol; jika tidak, gunakan atribut scrollTop dan scrollLeft untuk menetapkan kedudukan bar skrol.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan dan mengawal kedudukan bar skrol dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!