Mengenai masalah bar skrol/mengalih keluar bar skrol dalam pengeluaran halaman HTML_HTML/Xhtml_Web

1. Masalah warna bar skrol di bawah xhtml

Dalam html asal, kita boleh menentukan bar skrol keseluruhan halaman seperti ini:

Salin kod

Kod adalah seperti berikut:

badan{
scrollbar-3dlight-color:#D4D0C8 /*- paling kiri-; */
scrollbar -highlight-color:#fff; /*- Second from left-*/
scrollbar-face-color:#E4E4E4; /*- Face-*/
scrollbar-arrow-color :#666; /*- Anak panah-*/
warna-bayang-scrollbar:#808080; kanan-*/
scrollbar-base -color:#D7DCE0; /*- base color-*/
scrollbar-track-color:#;/*- slaid-*/
}

Tetapi kod yang sama, Aplikasi kami tidak akan berfungsi di bawah xhtml Saya percaya ramai rakan baik telah menghadapi masalah yang sama.

Jadi bagaimana saya boleh menggunakan gaya bar skrol di bawah xhtml? Lihat kod berikut:

Salin kod Kod tersebut adalah seperti berikut:

html{
scrollbar-3dlight-color:#D4D0C8; /*- Luar kiri-*/
scrollbar-highlight-color:#fff; /*- Second from left-*/
scrollbar-face -warna:#E4E4E4; /*- muka-*/
warna-panah-scrollbar:#666; -*/
scrollbar -darkshadow-color:#D7DCE0; /*- satu kanan-*/
scrollbar-base-color:#D7DCE0; /*- base color-*/
scrollbar-track- color:#;/*- slaid Dao-*/
}


Satu-satunya perbezaan antara kod ini dan perenggan sebelumnya ialah dalam elemen yang ditakrifkan oleh css, satu ialah badan dan satu lagi ialah html. Mari uji sekali lagi dan tukar "badan" halaman html kepada "html" untuk mengujinya dan mendapati kesannya masih boleh dicapai. Jadi kenapa?

Mari kita lihat gambar di bawah:

Ini ialah struktur pokok dom paling asas bagi HTML.

Mari kita lihat takrifan html dan xhtml:

HTML (Bahasa Penanda Teks Hiper, Bahasa Penanda Hiperteks), Bahasa Penanda HyperText digunakan secara meluas di Internet HTML menerangkan teks Bagaimana penanda aras dipaparkan dan cara hiperpautan bersambung ke halaman lain.

XHTML (Extensible Hypertext Markup Language, Extensible Hypertext Markup Language) ialah bahasa penanda yang ungkapannya serupa dengan HTML, tetapi sintaksnya lebih ketat. Dari segi hubungan warisan, HTML ialah aplikasi berasaskan SGML dan sangat fleksibel, manakala XHTML adalah berdasarkan XML, iaitu subset SGML. XHTML 1.0 menjadi cadangan W3C pada 26 Januari 2000.

Secara literal, xhtml mempunyai satu x lebih daripada html, jadi x ini sebenarnya xml Mengapa kita perlu menambah xml di dalamnya? Sebenarnya, sebab yang paling asas adalah untuk menjadikan html lebih tersusun dan standard (kerana html sangat buruk).

OK, mari kita kembali dan lihat pokok struktur di atas. Apa yang kita takrifkan dalam html ialah badan Kerana html tidak begitu standard, ini boleh berlaku, tetapi dalam xhtml ini tidak akan berfungsi Jelas sekali, tag badan itu sendiri bukanlah elemen akar, hanya html adalah elemen akar, dan bar skrol halaman juga tergolong dalam elemen akar, jadi inilah sebabnya definisi badan kita tidak mempunyai kesan, kerana apa kita takrifkan hanyalah sub-elemen. OK, kita tahu prinsipnya, mari kita buat eksperimen jika kita menukar takrifan "badan" atau "xhtml" kepada "*":

Salin kod Kodnya adalah seperti berikut:

*{

scrollbar-3dlight-color:#D4D0C8; /*- paling luar kiri-*/
scrollbar- highlight-color: #fff; /*- Kedua dari kiri-*/
scrollbar-face-color:#E4E4E4; Anak panah-*/
warna-bayang-scrollbar:#808080; /*- Kedua dari kanan-*/
warna-bayang-gelap bar skrol:#D7DCE0; /*- Pertama dari kanan-*/
warna-asas-scrollbar:#D7DCE0 ; /*- Warna asas-*/
warna-track-bar tatal:#;/*- Slider-*/
}


Lulus dalam kedua-dua html dan xhtml, kerana * adalah untuk mentakrifkan sebarang teg pada halaman, yang sudah tentu juga termasuk teg "html".

(ps: Sebenarnya, ia tidak begitu banyak perbezaan antara html dan xhtml kerana ia adalah perbezaan antara sama ada terdapat doctype peralihan XHTML 1.0, tetapi jika anda mengalih keluar doctype peralihan XHTML 1.0 dari halaman, maka halaman ini tidak akan mempunyai doctype , kaedah paparan lalai ialah html4.01, tetapi anda perlu menukar doctype peralihan XHTML 1.0 kepada HTML 4.01 doctype Ia tidak akan mempunyai sebarang kesan jika anda mentakrifkan badan pada halaman yang sama, walaupun standard halaman ini ialah html 4.01)

2 , masalah bar skrol mendatar pada halaman bingkai di bawah xhtml

Apabila menggunakan IE6 untuk menyemak imbas halaman xhtml dengan bingkai, bar skrol mendatar dan menegak akan muncul bersama-sama secara lalai. Ini adalah pepijat dalam IE6, dan ia adalah dalam Firefox Biasanya, sebabnya adalah disebabkan oleh kecacatan dalam tafsiran doctype peralihan XHTML 1.0.

Secara amnya terdapat 3 penyelesaian untuk pepijat ini,

Kaedah 1:

Kod:

html { overflow-y: }

Prinsip: Paksa paparan bar skrol menegak IE dan abaikan bar skrol mendatar.
Kelebihan: Menyelesaikan masalah ini sepenuhnya, membolehkan anda mengekalkan doctype XHTML yang lengkap.
Kelemahan: Bar skrol menegak muncul walaupun halaman tidak memerlukan bar skrol menegak.

Kaedah 2:

Kod:

html { overflow-x: hidden; Penatalan menegak menyesuaikan diri dengan kandungan.
Kelebihan: Selesaikan masalah ini secara visual. Bar skrol menegak tidak dipaksa untuk muncul apabila tidak perlu.
Kelemahan: Ia hanya menyembunyikan bar skrol mendatar Jika halaman benar-benar memerlukan bar skrol mendatar, kandungan di luar skrin tidak akan kelihatan kerana pengguna tidak boleh menatal secara mendatar.

Kaedah 3:

Kod:

badan { margin-kanan: -15px; margin-bawah: -15px }

Prinsip: Wasiat ini Tambahkan nilai negatif pada margin secara mendatar dan menegak Selepas IE menambah nilai tepat ini, ia akan menghilangkan ilusi keperluan untuk bar skrol.
Kelebihan: Masalah ini diselesaikan secara visual, tatal menegak adalah adaptif mengikut kandungan.
Kelemahan: Memandangkan jidar 15px "dicipta secara buatan", kawasan skrin yang diisi tidak boleh digunakan.



Alih keluar bar skrol mendatar:
:


Sembunyikan bar skrol mendatar dan tunjukkan bar skrol menegak:


Sembunyikan semua


atau


Berikut ialah kod atribut bar tatal:
overflow-y: auto |
auto: Potong kandungan dan tambah bar skrol apabila diperlukan
tersembunyi: Jangan paparkan kandungan yang melebihi ketinggian objek Atribut ini tidak akan diperkenalkan di sini, jika anda suka, anda boleh mencubanya sendiri
tatal: Sentiasa paparkan Bar Tatal menegak

Pertama sekali, izinkan saya bercakap tentang cara mengalih keluar bar tatal:
Jika anda menggunakan templat gaya Baidu, hanya boleh ada satu bar tatal, iaitu bar skrol tetingkap penyemak imbas terbesar di sebelah kanan seluruh ruang, iaitu bar skrol yang saya cantikkan Sekarang biar saya beritahu anda, kami boleh mengalih keluar bar skrol ini, tetapi ia tidak akan menjejaskan kaedah penyemakan imbas: Tambah limpahan-y pada badan
{}:
kelihatan akan jadi Itu sahaja, jadi bar skrol tidak akan dipaparkan. Anda mungkin bertanya, bagaimana untuk menariknya ke bawah seperti ini? Haha, oleh kerana saya katakan ia tidak akan menjejaskan pelayaran, sudah tentu ada cara untuk menyemak imbas adalah dengan menggunakan roda tetikus
Walaupun bar skrol hilang, roda tetikus masih boleh menatal halaman web ke atas turun. Saya percaya bahawa apabila anda secara lazimnya menyemak imbas web, anda menggunakan roda tatal untuk menatal ke bawah halaman web lebih banyak kali daripada anda menyeret terus bar tatal dengan tetikus
, bukan? Sebagai peringatan, jika anda bertemu rakan yang tidak mempunyai bar skrol dan roda skrol pada tetikusnya, bagaimanakah dia harus menyemak imbas web? Haha, anda boleh menggunakan PageUp dan PageDown
di atas kekunci anak panah pada papan kekunci untuk memusingkan halaman ke atas dan ke bawah Anda juga boleh menggunakan Space untuk menarik ke bawah halaman web dan Shift Space untuk menarik ke atas halaman web kekunci anak panah atas dan bawah untuk menarik Selain itu, anda boleh menekan kekunci Laman Utama untuk kembali ke bahagian atas halaman web, dan tekan kekunci Tamat untuk
untuk mencapai bahagian bawah halaman web cara? Walau bagaimanapun, ini akan sentiasa menyebabkan sedikit kesulitan, jadi anda boleh mempertimbangkan sama ada untuk membatalkan bar skrol ini mengikut ruang dan pilihan anda sendiri.

Haha, saya tidak sangka akan menyebut begitu banyak perkataan sekaligus

Mari kita bincang tentang cara menambah bar skrol:
overflow-y: auto;height: berapa px
auto
adalah untuk menentukan secara automatik sama ada untuk menambah bar skrol Apabila kandungan objek yang ditetapkan melebihi ketinggian yang ditetapkan, bar skrol akan ditambah secara automatik badan{} ialah
overflow-y: auto;height: ketinggian penyemak imbas, jadi apabila kandungan halaman web melebihi ketinggian penyemak imbas, bar skrol akan muncul secara automatik di sebelah kanan penyemak imbas
Jika anda
perlu menetapkan ini, saya syorkan ia Tetapkan dalam ulasan terkini #m_comment{}, senarai artikel #m_blog{} dan templat lain yang kandungan dan ketinggiannya tidak ditetapkan Sesetengah rakan tidak dapat mencari ID templat ini
Mereka mungkin hanya mempunyai, sebagai contoh, #. m_comment div.item{ } atau #m_pro a{}, dsb., kemudian anda boleh menambah ID yang anda tidak ada, supaya anda boleh menetapkannya

Berikut ialah cara lain untuk menambah bar skrol:
overflow-y :scroll
Fungsi parameter ini telah dijelaskan di atas, tetapi jika anda hanya menambah parameter ini, walaupun bar skrol akan dipaparkan, bar skrol tidak akan dipaparkan, jadi anda mesti menambah
tinggi: berapa px
Atribut ketinggian adalah serupa dengan kaedah di atas, tetapi terdapat perbezaan asas Tidak kira sama ada ketinggian kandungan objek melebihi ketinggian yang ditetapkan mengikut ketinggian, bar skrol akan sentiasa dipaparkan di sebelah

Mari kita bincangkan di bawah Berkenaan dengan pengindahan scroll bar, kawan saya menunjukkan penjelasan di Internet Saya rasa gambar di atas sangat bagus, tetapi ia sangat kecil, jadi saya menggandakan saiz dan ia kelihatan lebih jelas. Mari kita bincangkan tentang kecantikan dahulu. :

SCROLLBAR-WAJAH-WARNA: Kod warna;

SCROLLBAR-HIGHLIGHT-COLOR: kod warna; WARNA: kod warna; SCROLLBAR-ARROW-COLOR: kod warna ; SCROLLBAR-TRACK-COLOR: kod warna; Adakah anda menganggukkan kepala apabila anda melihat begitu banyak sifat? Haha, jangan risau, anda akan berasa lebih baik jika anda melihat gambar rajah yang dibesarkan dua kali yang saya nyatakan tadi: Gambar di sini juga mempunyai atribut warna asas bar skrol atribut Ia adalah jumlah tujuh sifat di atas. Bagaimana anda mengatakannya? Iaitu, selepas anda menetapkan warna atribut ini,

anda tidak perlu menetapkan 7 atribut sebelumnya Bar skrol akan menetapkannya secara automatik untuk anda, tetapi tetapan ini akan berdasarkan bar skrol- anda set. Kelebihan atribut ini ialah ia tidak memerlukan semua orang mengkaji warna pelbagai tempat, tetapi kelemahannya ialah ia tidak boleh menggabungkan semua warna menjadi satu. .

Nota: Jika scrollbar-base-color ditetapkan, jangan tetapkan tujuh atribut yang lain Jika tujuh atribut lain ditetapkan, jangan tetapkan scrollbar-base-color, jika tidak, mungkin terdapat konflik akan menjadi beberapa kesan yang tidak berkesan

Akhirnya, memandangkan anda mungkin menyukai kod kecantikan saya [sangat busuk~], saya menyiarkan kod kecantikan saya:





Salin kod

Kod tersebut adalah seperti berikut:


SCROLLBAR-WARNA-MUKA: #CCFFFF;
SCROLLBAR-HIGHLIGHT- WARNA : putih;
SCROLLBAR-SHADOW-COLOR: #813533;
SCROLLBAR-3DLIGHT-COLOR: #813533;
SCROLLBAR-DARKSHADOW-COLOR: #813533;

Saya menambahkan kod di atas dalam kandungan{}