Pertanyaan Browser scrollbar ada di bawah div saya yang tetap


saya memiliki header tetap dengan lebar 100%.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

scrollbar browser berada di bawah div tetap saya. Bagaimana cara memperbaikinya?

scrollbar


32
2017-10-23 10:38


asal


Jawaban:


itu karena overflow-x: hidden; di nomor baris base.css 9

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

30
2017-10-23 10:39



Ini bisa dipecahkan dengan menambahkan limpahan tubuh

dari

overflow:auto;

untuk

overflow:auto;
overflow:initial;

Ini masalahmu

Jika gulungan Anda diatur pada tubuh, jika terstruktur sebagai body> wrapper> header (dengan posisi tetap), konten jadi aktif

di bawah ini adalah solusi Anda

solusi untuk masalah

Catatan: ini hanya akan bekerja pada tubuh tetapi tidak pada wadah div dengan scroll. Anda juga dapat bekerja dengan z-index untuk membuatnya berfungsi, tetapi Anda akan menentukan z-index untuk menumpuk elemen lain agar menjadi benar.

Semoga ini membantu..:)


9
2018-02-28 14:31



Sebuah hack css (saya akhirnya menemukan jalan) untuk ini dengan tidak banyak penjelasan yang dibuat dengan cepat - elemen mengambang pertama adalah. Saya pikir untuk memahami prinsip cara kerjanya dari kode di bawah ini.

Pembaruan: Dan ada masalah untuk browser seluler lihat di bawah untuk menilai apakah Anda setuju dengan itu atau tidak.

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

 

Dan kode terakhir, hampir sama dengan hal-hal yang ingin Anda lihat terlihat dan berfungsi

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

 

Yang penting berfungsi dengan browser seluler dan desktop. Sebenarnya untuk saat ini saya menguji ponsel di tepi jendela ketika komputer saya diubah ke mode tablet dan kemudian desktop satu. Kode bekerja setiap saat. Untuk memeriksa apakah atau tidak ini bekerja dengan: sebelum bukannya div id = "aaaa" untuk membuatnya lebih css murni dan tambahan divs independen.

Pembaruan: tidak berfungsi dengan baik untuk sebelumnya karena peramban Edge tidak mengubah bilah gulir saat memasuki mode tablet.

Jika Anda mengalami masalah dengan konten tersembunyi di elemen bbbb, cobalah untuk tidak memposisikan: elemen absolut / tetap dalam wadah bbbb.

Saya belum mengujinya untuk semua situasi dan browser.

Memperbarui: masalah yang disebutkan di suatu tempat di bagian atas jawaban ini - namun pada bilah gulir browser seluler ditutupi karena bilah gulir dinamis - hanya muncul ketika gulir Anda dan Anda tahu itu bukan bagian dari wadah apa pun. Scrollbar mungkin sangat tipis di semua browser, jadi Anda harus memutuskan apa yang harus dilakukan dengan itu. Mungkin sedikit 5 piksel margin atau lebih?


1
2018-01-31 23:41



Saya memiliki masalah ini, scrollbar saya berada di bawah header tetap saya dan saya memecahkan ini setelah saya dihapus dari tag html saya height: 100%; dan saya menambahkan sopan santun lain untuk memastikan saya memiliki hasil yang sama. Tidak ada solusi lain yang membantu saya. Saya harap ini membantu seseorang.


1
2018-06-21 09:56



Masalahnya bukan dengan overflow-x pada tag body. Itu karena overflow-x danoverflow-y pada html menandai. Setelah saya menghapus ini dari tag HTML, saya bisa menaruh luapan apa pun yang saya inginkan di tubuh saya.

Ini terjadi ketika:

  • overflow-x diatur baik auto, hidden, overflow, atau scroll
  • overflow-y diatur baik auto, hidden, -webkit-paged-x, atau -webkit-paged-y

Tidak harus menjadi panggilan eksplisit untuk overflow-x atau overflow-y, sebagai overflow mengatur keduanya.

Saya menggunakan Chrome 67 menggunakan Windows 10.


0
2018-06-28 11:24