Cegah scroll-bar dari penambahan ke Lebar halaman di Chrome


125

Saya mengalami masalah kecil saat mencoba menjaga halaman .html saya pada lebar yang konsisten di Chrome, Misalnya saya memiliki halaman (1) dengan banyak konten yang melebihi tinggi viewport (kata yang tepat?), Jadi ada scroll bar vertikal di halaman itu (1). Pada halaman (2) saya memiliki tata letak yang sama (menu, divs, ... dll) tetapi lebih sedikit konten, jadi tidak ada scroll-bar vertikal di sana.

Masalahnya adalah bahwa pada halaman (1) scroll-bar tampaknya mendorong elemen sedikit ke kiri (menambah lebar?) Sementara semuanya tampak baik di tengah halaman (2)

Saya masih pemula di HTML / CSS / JS, dan saya cukup yakin bahwa ini tidak terlalu sulit, tetapi saya tidak beruntung menemukan solusinya. Ini berfungsi sebagaimana mestinya pada IE10, dan FireFox (bilah gulir yang tidak mengganggu), saya hanya menemukan ini di Chrome.

Jawaban:


42

Anda bisa mendapatkan ukuran scrollbar dan kemudian menerapkan margin ke wadah.

Sesuatu seperti ini:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS untuk menghapus h-scrollbar:

body{
    overflow-x:hidden;
}

Coba lihat ini: http://jsfiddle.net/NQAzt/


1
Solusi pintar, saya tidak mengerti kondisi di 'jika' sekalipun!
Acemad

3
ScrollHeight adalah tinggi total sebuah elemen. Apa yang Anda lihat dan apa yang tersembunyi. Contoh: Jendela Anda memiliki tinggi seperti 500px, tubuh memiliki konten untuk 900px. 500px ditampilkan tetapi 400px lainnya disembunyikan dan bilah gulir akan muncul untuk menampilkan piksel yang tersisa ini. Jadi kondisinya seperti "jika tinggi semua konten lebih besar dari tinggi sudut pandang, tambahkan margin ke badan". Maaf untuk bahasa Inggris saya yang buruk
Lwyrn

Saya mengerti sekarang, terima kasih atas penjelasannya yang jelas, saya mencoba solusi ini dan mendapatkan bilah gulir horizontal tambahan, meskipun tidak tahu mengapa.
Acemad

2
Saya telah menambahkan sedikit css untuk mencegahnya di balasan :)
Lwyrn

4
Solusi ini menonaktifkan pengguliran
avalanche1

117

DISCLAIMER : overlay sudah tidak digunakan lagi .
Anda masih dapat menggunakan ini jika benar-benar harus, tetapi cobalah untuk tidak melakukannya.

Ini hanya berfungsi di browser WebKit , tetapi saya sangat menyukainya. Akan berperilaku seperti autodi browser lain.

.yourContent{
   overflow-y: overlay;
}

Ini akan membuat bilah gulir hanya muncul sebagai hamparan , sehingga tidak memengaruhi lebar elemen Anda!


Ini tidak berfungsi untuk IE11. Apakah ada solusi agar nilai overlay berfungsi di IE.
Anvesh Reddy

tidak sejauh yang saya tahu, Anda harus puas dengan opsi lain yang diusulkan di utas ini untuk IE
simonDos

Banyak yang dibutuhkan! Saya membutuhkan lebih dari setengah jam untuk melihat apa yang salah dengan markup saya. Gaya apa yang terlalu sering saya gunakan? Ini harus menjadi default juga.
kushalvm

3
Tapi sudah usang
Akash Yellappa

1
Saya memperbarui solusi untuk mencerminkan hal itu. Agak sedih: P
simonDos

57

Yang perlu Anda lakukan hanyalah menambahkan:

html {
    overflow-y: scroll;
}

Dalam file css Anda karena ini akan memiliki penggulung apakah diperlukan atau tidak meskipun Anda tidak akan dapat menggulir

Artinya viewport akan memiliki lebar yang sama untuk keduanya


4
jadi, saya wajib menambahkan scroll-bar ke keduanya? bukankah ada cara untuk mengabaikan lebar bilah gulir vertikal? Terima kasih !
Acemad

Tidak ada cara untuk mengabaikannya yang saya sadari tetapi apa yang saya katakan berhasil @ Rockr90
Hive7

@ d3c0y ini benar dan saya telah menyebutkannya dalam jawaban tetapi metode termudah untuk melakukannya. Saya tidak tahu apakah itu telah berubah dalam 3 tahun terakhir
Hive7

@aks. itu memaksa browser untuk berpikir Anda dapat menggulir sehingga memungkinkan untuk menggulir dan menggulir y adalah penggulung samping
Hive7

1
overflow-y: gulir; akan menambah / menampilkan scrollbar di semua viewport meskipun tidak ada elemen yang dapat digulir.
Abhilash

35

Mungkin

html {
    width: 100vw;
}

hanya apa yang Anda inginkan.


1
Ini bekerja dengan baik untuk kasus penggunaan saya: gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 Saya menggunakan calc()untuk menentukan lebar tampilan konten utama sehingga navigasi offscreen tetap dapat menempati sisi kiri layar di desktop, sambil mempertahankan native gulir di ponsel.
bmcminn

3
Saya telah bermain-main dengan scrollbar saya selama 36 jam terakhir. Saya memiliki beberapa solusi berbeda yang berhasil, tetapi mengangkat masalah lain. Ini adalah solusi pertama yang berfungsi dan memungkinkan saya menggunakan scrollbar normal di tempat lain. Terima kasih.
halal

Sama-sama! Tapi mengotak-atik htmllebar dalam vws agak sedikit hacky , jadi harap berhati-hati!
Neurotransmitter

Ini bekerja dengan baik, dapatkah seseorang menjelaskan cara kerjanya?
Zeus

1
Solusi tidak buruk, tetapi bisa menambahkan scrolling horizontal.
FDisk

18

Browser Webkit seperti Safari dan Chrome mengurangi lebar bilah gulir dari lebar halaman yang terlihat saat menghitung lebar: 100% atau 100vw. Lebih lanjut di DM Rutherford's Scrolling dan Page Width .

Coba gunakan overflow-y: overlaysebagai gantinya.


9
Harap jangan memposting jawaban yang identik untuk beberapa pertanyaan. Posting satu jawaban bagus, lalu pilih / tandai untuk menutup pertanyaan lain sebagai duplikat. Jika pertanyaannya bukan duplikat, sesuaikan jawaban Anda dengan pertanyaan tersebut.
Paul Roub

Ini seharusnya berfungsi, tetapi overlay belum standar dan juga tidak didukung di semua browser.
Zia Ul Rehman Mughal

Cegukan cepat: di Safari hal ini menyebabkan halaman berhenti bergulir
joshfindit

13

Saya menemukan saya bisa menambahkan

::-webkit-scrollbar { 
display: none; 
}

langsung ke css saya dan itu akan membuat bilah gulir tidak terlihat, tetapi masih memungkinkan saya untuk menggulir (setidaknya di Chrome). Bagus untuk saat Anda tidak ingin scrollbar mengganggu halaman Anda!


5
Ini agak berisiko dan bukan solusi lintas-browser meskipun stackoverflow.com/questions/9251354/…
Alex Pyzhianov

4

Untuk penampung dengan lebar tetap, solusi lintas browser CSS murni dapat dilakukan dengan menggabungkan penampung ke dalam div lain dan menerapkan lebar yang sama ke kedua div.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Klik di sini untuk melihat contoh di Codepen


3

Sepertinya jawaban saya yang lain tidak berfungsi dengan baik saat ini (tetapi saya akan terus mencoba membuatnya beroperasi).

Tetapi pada dasarnya apa yang perlu Anda lakukan, dan apa yang coba dilakukannya secara dinamis, adalah menyetel lebar konten menjadi sedikit lebih kecil dari induk, panel yang dapat digulir.
Sehingga saat muncul scrollbar tidak berpengaruh pada konten.

CONTOH ini menunjukkan cara yang lebih hack untuk mencapai tujuan itu, dengan melakukan hardcoding widthdaripada mencoba membuat browser melakukannya untuk kita melalui padding.
Jika ini memungkinkan, ini adalah solusi paling sederhana jika Anda tidak menginginkan scrollbar permanen.


Itu solusi yang bagus, namun saya mengerjakan situs web responsif menggunakan Bootstrap, dan penting untuk mengotomatiskan lebar dan semuanya, apa yang Anda katakan?
Acemad

baik kecuali (dalam urutan kemungkinan menurun): seseorang mencari cara untuk mendapatkan jawaban saya yang lain untuk bekerja (baik dengan padding atau margin); Anda bisa menggunakan kueri media untuk menerapkan padding secara selektif; atau ekspresi css diimplementasikan di browser modern untuk menerapkan padding secara selektif. Saya pikir hanya scrollbar permanen atau menggunakan JS untuk mendeteksi scrollbar adalah cara yang tepat
Hashbrown

1

EDIT: jawaban ini kurang tepat saat ini, lihat jawaban saya yang lain untuk melihat apa yang saya coba lakukan di sini. Saya mencoba memperbaikinya, tetapi jika Anda dapat menawarkan bantuan, lakukan di komentar, terima kasih!

Menggunakan padding-rightakan mengurangi kemunculan scrollbar yang tiba-tiba

CONTOH

chrome devtools menampilkan padding yang tidak digerakkan

Seperti yang Anda lihat dari titik-titik, teks membuatnya ke titik yang sama di halaman sebelum dibungkus, terlepas dari apakah scrollbar ada atau tidak.
Ini karena ketika scrollbar diperkenalkan, padding bersembunyi di belakangnya, sehingga scrollbar tidak menekan teks!


3
Lebar scrollbar dapat berubah tergantung pada OS dan Browser yang Anda gunakan. Ini dapat mengukur 20px serta 40px
Lwyrn

2
baik Anda akan menggunakan maksimum dari semua nilai yang mungkin
Hashbrown

1
Beberapa perangkat / gulungan browser OS bahkan tidak memiliki lebar.
Sergey Goliney

0
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

di mana 300 px adalah setengah dari lebar jendela dialog saya.

Ini sebenarnya satu-satunya hal yang berhasil untuk saya.


0

Saya memiliki masalah yang sama di Chrome. Itu hanya terjadi pada saya ketika bilah gulir selalu terlihat. (Ditemukan di pengaturan umum) Saya memiliki modal dan ketika saya membuka modal saya perhatikan bahwa ...

body {
    padding-left: 15px;
}

ditambahkan ke tubuh. Untuk menghentikan ini terjadi, saya menambahkan

body {
    padding-left: 0px !important;
}

0

Saya tidak bisa menambahkan komentar untuk jawaban pertama dan sudah lama ... tapi demo itu bermasalah:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('scrollHeight') selalu sama dengan b.height (),

Saya pikir seharusnya seperti ini:

if(b.prop('scrollHeight')>window.innerHeight) ...

Akhirnya saya merekomendasikan sebuah metode:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.