masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > tetapan skrol html

tetapan skrol html

PHPz
Lepaskan： 2023-05-15 16:51:09
asal
1609 orang telah melayarinya

Apabila reka bentuk tapak web menjadi lebih kompleks dan antara muka pengguna menjadi lebih pelbagai, tetapan tatal telah menjadi elemen reka bentuk yang tidak boleh diabaikan. Dalam HTML, pelbagai kesan penatalan boleh dicapai melalui CSS dan JavaScript. Artikel ini akan memperkenalkan tetapan penatalan dalam HTML, termasuk aspek berikut:

  1. Tetapan penatalan CSS

Dalam CSS, anda boleh menggunakan atribut berikut untuk menetapkan penatalan elemen Kelakuan:

  • limpahan: Tetapkan sama ada kandungan tatal elemen melimpahi kawasan paparannya. Nilai pilihan termasuk kelihatan (nilai lalai, kandungan tidak akan dipangkas), tersembunyi (kandungan akan dipangkas), tatal (bar tatal dipaparkan) dan auto (pelayar secara automatik menentukan sama ada untuk memaparkan bar tatal).
  • overflow-x dan overflow-y: Tetapkan gelagat menatal mendatar dan menegak bagi elemen masing-masing. Nilai pilihan adalah sama seperti limpahan.
  • overflow-wrap: Tetapkan sama ada hendak membalut secara automatik apabila kandungan teks terlalu panjang.
  • ruang putih: Sama seperti balutan limpahan, tetapkan sama ada kandungan teks akan dibalut secara automatik.

Sebagai contoh, kod berikut menetapkan kandungan elemen div supaya boleh ditatal dan secara automatik menyembunyikan bar skrol apabila ketinggian elemen melebihi: 

<style>
    .scrollable {
        height: 200px;
        overflow-y: auto;
    }
</style>
<div class="scrollable">
    <p>这是一段很长的内容，超过了200px的高度，所以会显示滚动条。</p>
</div>
Salin selepas log masuk
  1. Tetapan tatal untuk JavaScript

Dalam JavaScript, anda boleh menggunakan kaedah berikut untuk mencapai kesan tatal unsur:

  • kaedah tatal(): Biarkan elemen tatal pada jarak tertentu dalam arah yang ditentukan.
  • kaedah scrollTo() dan scrollBy(): masing-masing digunakan untuk menatal tepat dan menatal relatif Anda boleh menentukan kedudukan atau jarak tertentu untuk menatal elemen.
  • Atribut tatal Atas dan Tatal Kiri: Dapatkan atau tetapkan kedudukan tatal elemen.

Sebagai contoh, kod berikut menggunakan JavaScript untuk melaksanakan kesan penatalan automatik elemen div: 

<script>
    var elem = document.querySelector('.scrollable');
    var top = 0;
    setInterval(function() {
        top += 1;
        elem.scrollTop = top;
    }, 10);
</script>
Salin selepas log masuk
  1. Tetapan penatalan lain

Selain CSS dan JavaScript dan HTML juga termasuk beberapa tetapan penatalan lain, seperti: