hujung hadapan web
tutorial js
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik
Dalam pembangunan web, kami sering menggunakan bar skrol untuk membantu pengguna menyemak imbas kandungan halaman yang panjang. Walau bagaimanapun, bar skrol tradisional akan sentiasa dipaparkan pada halaman secara lalai, yang kadangkala menjejaskan pengalaman visual pengguna. Untuk meningkatkan estetika antara muka pengguna, kami boleh menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan menyembunyikan bar skrol secara automatik. Artikel ini menerangkan cara menggunakan ketiga-tiga teknologi ini untuk mencapai kefungsian ini dan menyediakan contoh kod khusus.
Pertama, kita perlu mencipta struktur halaman asas menggunakan HTML. Tambahkan elemen bekas dalam teg badan untuk mengandungi kandungan halaman. Seperti yang ditunjukkan di bawah:
<!DOCTYPE html>
<html>
<head>
<title>自动隐藏滚动条</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<!-- 页面内容 -->
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>Seterusnya, kita perlu menggunakan CSS untuk mentakrifkan gaya elemen bekas dan menyembunyikan bar skrol lalai. Tambahkan kod berikut pada fail style.css:
.container {
width: 100%;
height: 100vh;
overflow: auto;
}
.container::-webkit-scrollbar {
width: 8px;
background-color: #f5f5f5;
}
.container::-webkit-scrollbar-thumb {
background-color: #888;
}
.container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}Dalam kod di atas, kami menggunakan ::webkit-scrollbar pseudo-element untuk mentakrifkan gaya bar skrol. Antaranya, atribut width mentakrifkan lebar bar skrol, atribut warna latar belakang mentakrifkan warna latar belakang bar skrol, dan atribut warna latar belakang mentakrifkan warna latar depan bar skrol.
Kemudian, kami menggunakan jQuery untuk mengesan sama ada elemen bekas perlu memaparkan bar skrol dan merealisasikan kesan penyembunyian automatik bar skrol. Tambahkan kod berikut pada fail script.js:
$(document).ready(function() {
$('.container').scroll(function() {
if ($(this).scrollTop() > 0) {
$('.container::-webkit-scrollbar').addClass('show');
} else {
$('.container::-webkit-scrollbar').removeClass('show');
}
});
});Dalam kod di atas, kami menggunakan acara skrol untuk mengesan kedudukan bar skrol. Jika nilai scrollTop() adalah lebih besar daripada 0, ini bermakna bar skrol telah ditatal, dan kami memaparkan bar skrol dengan menambah kelas pertunjukan jika tidak, kami menyembunyikan bar skrol dengan mengalih keluar kelas persembahan.
Akhir sekali, kita perlu mencipta pemalam jQuery untuk memulakan secara automatik fungsi bar skrol dalam halaman untuk kegunaan mudah di halaman lain. Tambahkan kod berikut pada fail script.js:
$.fn.autoHideScrollbar = function() {
$(this).scroll(function() {
if ($(this).scrollTop() > 0) {
$(this).find('::-webkit-scrollbar').addClass('show');
} else {
$(this).find('::-webkit-scrollbar').removeClass('show');
}
});
};
$(document).ready(function() {
$('.container').autoHideScrollbar();
});Dalam kod di atas, kami mencipta pemalam jQuery bernama autoHideScrollbar dan merangkumkan logik permulaan bar skrol di dalamnya. Kemudian, panggil pemalam dalam acara document.ready untuk memulakan fungsi bar skrol dalam halaman.
Melalui langkah di atas, kami telah berjaya melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik menggunakan HTML, CSS dan jQuery. Apabila pengguna menatal halaman, bar skrol akan dipaparkan atau disembunyikan secara automatik, yang meningkatkan estetika dan pengalaman pengguna halaman tersebut. Pembaca boleh mengubah suai gaya mengikut keperluan mereka sendiri dan menyepadukan kod ke dalam projek mereka sendiri. Semoga artikel ini dapat membantu anda!
Atas ialah kandungan terperinci Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan untuk menyembunyikan bar skrol secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Microsoft membawa bar skrol Fasih Windows 11 ke Google Chrome
Apr 14, 2023 am 10:52 AM
Tidak seperti Windows 10, Windows 11 menampilkan "bar skrol cecair" moden baharu yang berubah bentuk apabila pengguna berinteraksi dengannya. Bar skrol fasih bersifat dinamik, ia berskala secara automatik dalam faktor bentuk yang berbeza atau apabila anda menukar saiz tetingkap, dan pada masa ini ia digunakan dalam apl seperti Tetapan, Pemain Media dan banyak lagi. Google Chrome mungkin mempunyai fungsi bar skrol yang lancar tidak lama lagi, menurut cadangan baharu daripada Microsoft. Microsoft mengatakan dalam cadangan bahawa mereka mahu memodenkan bar skrol lama dalam Chrome
Bagaimana untuk menyembunyikan penatalan bar skrol dalam tindak balas
Dec 21, 2022 pm 03:38 PM
Bagaimana untuk menyembunyikan skrol bar skrol dalam bertindak balas: 1. Buka fail "react-native" yang sepadan 2. Tetapkan skrol mendatar melalui mendatar 3. Sembunyikan bar skrol mendatar dengan menetapkan nilai "showsHorizontalScrollIndicator" kepada "false".
Cara menetapkan bar skrol agar sentiasa dipaparkan pada sistem Mac - Cara menetapkan bar skrol agar sentiasa dipaparkan
Mar 18, 2024 pm 06:22 PM
Baru-baru ini, beberapa rakan telah merujuk kepada editor tentang cara menetapkan bar skrol sistem Mac untuk sentiasa dipaparkan . Langkah 1: Dalam menu mula sistem, pilih pilihan [System Preferences]. Langkah 3: Pada halaman Keutamaan Sistem, pilih pilihan [Umum]. Langkah 3: Pada halaman umum, pilih [Sentiasa] untuk memaparkan bar skrol.
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan pengisihan seret dan lepas imej
Oct 26, 2023 am 09:05 AM
Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan seret-dan-lepaskan imej Dalam reka bentuk laman web moden, seret-dan-lepaskan imej adalah fungsi yang sangat biasa. Ia membolehkan pengguna mengisih dan menyusun semula gambar pada halaman dengan cara yang intuitif, dengan itu meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan pengisihan seret dan lepas imej, dan memberikan contoh kod khusus. Struktur HTML: Pertama, kita perlu mencipta struktur HTML untuk imej. setiap satu
Bagaimana untuk mendayakan atau melumpuhkan bar skrol yang sentiasa dipaparkan dalam Windows 11?
Apr 24, 2023 pm 05:58 PM
Sistem pengendalian Windows membolehkan pengguna menentukan sama ada bar skrol harus disembunyikan secara automatik apabila ia tidak aktif atau tidak digunakan. Windows, sebaliknya, mendayakan bar skrol secara lalai. Jika mana-mana pengguna ingin mendayakan atau melumpuhkan ciri ini pada sistem mereka, sila rujuk artikel ini untuk membantu mereka mengetahui caranya. Cara mendayakan atau melumpuhkan bar skrol sentiasa hidup dalam Windows 11 1. Menekan dan menahan kekunci Windows+U akan membuka halaman Kebolehcapaian pada sistem anda. 2. Pilih kesan visual dengan mengklik padanya, ia terletak di bahagian atas halaman Kebolehcapaian. 3. Jika anda ingin mendayakan ciri Sentiasa Tunjukkan Bar Tatal pada sistem anda, klik butang togol Sentiasa Tunjukkan Bar Tatal untuk menghidupkannya seperti yang ditunjukkan di bawah. 4. Anda sentiasa boleh menunjukkan
Bagaimana untuk membuat bar skrol html
Feb 22, 2024 pm 03:24 PM
Cara membuat bar skrol HTML memerlukan contoh kod khusus Dalam reka bentuk web, bar skrol adalah elemen biasa yang membolehkan halaman web mudah ditatal apabila terdapat terlalu banyak kandungan. Artikel ini akan memperkenalkan cara membuat bar skrol menggunakan HTML dan memberikan contoh kod khusus. Pertama, kita perlu memahami prinsip asas mencipta bar skrol dalam HTML. Gaya CSS boleh digunakan dalam HTML untuk mengawal penampilan dan kelakuan bar skrol. Secara khusus, kita boleh menggunakan sifat CSS untuk menetapkan bar skrol termasuk sifat yang biasa digunakan
Cara mengodkan kotak teks bar skrol HTML
Feb 19, 2024 pm 07:38 PM
Tajuk: Cara menulis kod kotak teks HTML dengan bar skrol Kotak teks dalam HTML ialah salah satu kawalan input pengguna yang biasa digunakan Dalam sesetengah kes, apabila kandungan teks terlalu panjang, kotak teks akan dipaparkan tidak lengkap. Pada masa ini, kita boleh menambah bar skrol pada kotak teks untuk menyokong penatalan. Artikel ini akan memperkenalkan secara terperinci cara menulis kod kotak teks HTML dengan kesan bar skrol, dan memberikan contoh kod khusus. 1. Gunakan elemen textarea untuk mencipta kotak teks Dalam HTML, kami menggunakan elemen textarea untuk mencipta kotak teks.
Bagaimana untuk menyedari bar skrol tidak menduduki ketinggian dalam css
Feb 01, 2023 am 09:27 AM
Bagaimana untuk melaksanakan bar skrol dalam CSS tanpa menduduki ketinggian: 1. Buka fail HTML yang sepadan 2. Cari kod asal "overflow-x: auto;" 3. Tukar nilai dalam "overflow-x: auto;"; kepada " overflow-x: overlay;" boleh membuat bar skrol tidak menduduki kedudukan.
