javascript menetapkan ketinggian bar skrol

Javascript telah menjadi sebahagian daripada pembangunan web moden. Menetapkan ketinggian bar skrol adalah keperluan biasa dalam reka bentuk web. Dalam artikel ini, kami akan mendalami cara menetapkan ketinggian bar skrol halaman web menggunakan Javascript.

Mengapa anda perlu menetapkan ketinggian bar skrol?

Dalam penyemakan imbas web harian, jika kandungan halaman web melebihi saiz tetingkap penyemak imbas, penyemak imbas akan memaparkan bar skrol secara automatik supaya pengguna boleh meluncur halaman ke atas dan ke bawah. Walau bagaimanapun, dalam beberapa kes khas, bar skrol halaman mungkin tidak cukup intuitif, seperti apabila anda mahu bar skrol kekal pada kedudukan tertentu atau apabila anda mahu menatal halaman pada kelajuan tertentu dan bukannya pengguna. menyeret bar skrol secara manual. Pada masa ini, menetapkan ketinggian bar skrol menjadi langkah yang perlu.

Bagaimana untuk menetapkan ketinggian bar skrol?

Terdapat banyak kaedah dalam Javascript untuk menetapkan ketinggian bar skrol. Di sini kami akan memperkenalkan dua kaedah yang popular.

Kaedah 1: Gunakan kaedah window.scrollTo() untuk menetapkan ketinggian bar skrol

Kaedah window.scrollTo() boleh menatal halaman web ke kedudukan yang ditentukan dengan menetapkan nilai ​daripada parameter x dan y.

Berikut ialah sintaks untuk menetapkan ketinggian bar skrol menggunakan kaedah window.scrollTo(): ​​

window.scrollTo(x-coord, y-coord);

di mana, x -coord mewakili koordinat kedudukan mendatar bar skrol, dan y-coord mewakili koordinat kedudukan menegak bar skrol.

Sebagai contoh, untuk menetapkan kedudukan menegak bar skrol kepada 500 piksel, anda boleh menulis kod berikut:

window.scrollTo(0, 500);

Kod ini akan Kedudukan menegak ditetapkan kepada 500 piksel, tetapi kedudukan mendatar tidak berubah.

Kaedah 2: Gunakan sifat Element.scrollTop untuk menetapkan ketinggian bar skrol

Kaedah lain ialah menggunakan sifat Element.scrollTop untuk menetapkan ketinggian bar skrol. Sifat ini mengembalikan dan menetapkan jarak dari bahagian atas elemen ke bekas tatalnya.

Element.scrollTop = value;

Sebagai contoh, untuk menetapkan kedudukan menegak bar skrol kepada 500 piksel, anda boleh menulis kod berikut:

document.documentElement.scrollTop = 500;

Kod ini menatal bahagian atas dokumen ke kedudukan 500 piksel. Sila ambil perhatian bahawa documentElement dalam kod ialah elemen akar dalam Model Objek Dokumen (DOM) penyemak imbas dan boleh digunakan sebagai ganti elemen badan untuk menetapkan ketinggian bar skrol.

Kelebihan menggunakan atribut scrollTop ialah ia boleh dipanggil oleh mana-mana elemen. Jika anda ingin menatal elemen dan bukannya keseluruhan dokumen, anda boleh menetapkan atribut scrollTop kepada elemen. Contohnya, jika anda ingin menatal elemen dengan id "myDiv" ke kedudukan 500 piksel, anda boleh menulis kod berikut:

document.getElementById("myDiv").scrollTop = 500;

Ini Kod akan menyebabkan elemen "myDiv" menatal ke kedudukan 500 piksel.

Kesimpulan

Kuasa Javascript menyediakan banyak alatan berguna untuk reka bentuk web. Dengan menggunakan kaedah window.scrollTo() atau sifat Element.scrollTop, anda boleh menetapkan ketinggian bar skrol pada halaman web anda, membawa lebih banyak fungsi dan pilihan ke halaman web anda.

Atas ialah kandungan terperinci javascript menetapkan ketinggian bar skrol. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!