Limpahan Mudah Alih: Auto menyebabkan bar scroll tersembunyi: Apakah sebabnya dan bagaimana menyelesaikannya?

CSS Mobile CSS Bar menyembunyikan Masalah: Punca dan penyelesaian

Dalam pembangunan mudah alih, paparan dan bersembunyi bar tatal sering menjadi sakit kepala. Artikel ini akan menganalisis kes biasa: overflow: auto menyebabkan bar tatal tidak disembunyikan secara automatik di sisi mudah alih dan menyediakan penyelesaian yang berkesan.

Penerangan Masalah:

Dalam penyemak imbas mudah alih, struktur div bersarang ditetapkan dengan overflow: auto , dan bar tatal dijangka akan tersembunyi secara automatik selepas menatal selesai. Walau bagaimanapun, keadaan sebenar ialah: bar skrol tersembunyi biasanya selepas tatal pertama, tetapi ia sentiasa dipaparkan selepas tatal kedua dan tidak boleh hilang secara automatik. Apa yang lebih membingungkan ialah selepas mengeluarkan harta border-radius div luar, masalah itu hilang.

Contoh kod:

<div id="f" style="background:red;height:300px;width:100%;overflow:hidden;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>Banyak kandungan teks ...</p>
      </div>
    </div>
  </div>

Analisis dan penyelesaian masalah:

Penyebab utama masalah terletak pada konflik antara atribut border-radius div luar (ID adalah F) dan overflow: auto div dalam (ID adalah B). border-radius menyebabkan masalah rendering, yang mempengaruhi mekanisme tersembunyi bar scroll.

Penyelesaian yang lebih baik:

Daripada mengeluarkan border-radius dari bahagian luar, pendekatan yang lebih baik adalah untuk memohon border-radius ke bahagian dalam (id adalah b) dan keluarkan overflow: hidden div luar (ID adalah f). Ini bukan sahaja mengekalkan kesan sudut bulat div luar, tetapi juga menyelesaikan masalah bar skrol bersembunyi.

Kod yang diubahsuai adalah seperti berikut:

<div id="f" style="background:red;height:300px;width:100%;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto; border-radius: 10px;">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>Banyak kandungan teks ...</p>
      </div>
    </div>
  </div>

Melalui pelarasan di atas, bar tatal di bahagian mudah alih boleh disembunyikan secara normal selepas menatal selesai, sambil mengekalkan gaya sudut bulat div luar, mengelakkan kehilangan gaya.

Atas ialah kandungan terperinci Limpahan Mudah Alih: Auto menyebabkan bar scroll tersembunyi: Apakah sebabnya dan bagaimana menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!