Bagaimana mencegah scrollbar memposisikan ulang halaman web?

218

Saya memiliki situs web dengan DIV berpusat-pusat. Sekarang, beberapa halaman perlu digulir, beberapa tidak. Ketika saya berpindah dari satu tipe ke tipe lainnya, tampilan scrollbar memindahkan halaman beberapa piksel ke samping. Apakah ada cara untuk menghindari ini tanpa secara eksplisit menunjukkan scrollbar pada setiap halaman?

html  css 
— Dmitri Nesteruk
sumber
6
Mengapa tidak ada yang menyebut tentang overflow-y: overlaydi utas ini?
— milkersarac
3
Menurut dokumen mozilla, overflow-y: overlaydisusutkan: developer.mozilla.org/en-US/docs/Web/CSS/overflow
— drojf

Jawaban:

266

overflow-y: gulir sudah benar, tetapi Anda harus menggunakannya dengan tag html, bukan badan atau Anda mendapatkan bilah gulir ganda di IE 7
Jadi css yang benar adalah: 

html {
  overflow-y: scroll;
}
— Ruben
sumber
1
IE 10+ memiliki bilah gulir mengambang sehingga Anda harus menonaktifkan ini untuk peramban ini
— Ruben
1
ini dapat menyebabkan masalah seperti bilah gulir ganda saat menggunakan dalam kombinasi dengan fancybox atau modal twitter bootstrap
— Ruben
info tambahan: twitter bootstrap sekarang menambahkan .modal-terbuka untuk tubuh Anda ketika modal terbuka
— Ruben
55
Layak disebutkan bahwa ini secara permanen menunjukkan scrollbar vertikal. Mungkin tidak selalu bisa diterima.
— rustyx
Saya mendapatkan bilah gulir ganda di Chromium dan Firefox. Saya menggunakan flex-box; mungkin itu yang menyebabkan ini ...
— Garrett
72

Bungkus konten elemen yang dapat digulir ke dalam div dan terapkan padding-left: calc(100vw - 100%);.

<body>
    <div style="padding-left: calc(100vw - 100%);">
        Some Content that is higher than the user's screen
    </div>
</body>

Caranya adalah yang 100vwmewakili 100% dari viewport termasuk scrollbar. Jika Anda mengurangi 100%, yang merupakan ruang yang tersedia tanpa scrollbar, Anda berakhir dengan lebar scrollbar atau 0jika tidak ada. Membuat padding dengan lebar tersebut di sebelah kiri akan mensimulasikan scrollbar kedua, menggeser konten yang berada di tengah kembali ke kanan.

Harap dicatat bahwa ini hanya akan berfungsi jika elemen yang dapat digulir menggunakan seluruh lebar halaman, tetapi ini seharusnya tidak menjadi masalah sebagian besar waktu karena hanya ada beberapa kasus di mana Anda telah memusatkan konten yang dapat digulir.

— Rapti
sumber
1
Akan lebih baik diterapkan melalui kelas daripada gaya inline, dan hanya akan bekerja di browser ini , tetapi ini adalah teknik yang pintar - saya tidak menyadari itu 100vwdan 100%mengukur hal-hal yang berbeda, jadi saya telah belajar sesuatu yang bermanfaat dari ini!
— Nick F
21
Ini benar-benar jenius dan benar-benar jawaban terbaik mengingat dukungan browser untuk calc sangat baik.
— michael
1
Anda dapat melakukan hal yang sama kecuali alih-alih menambahkan margin ke kiri, Anda menambahkan margin negatif ke kanan (lihat stackoverflow.com/a/39289453/6015444 ).
— Touniouk
2
Solusi ini akan menyebabkan masalah serupa dengan warna latar belakang seperti jawaban "width: calc (100vw - 34px);" tetapi di sisi kiri.
— Maciej Lew
1
Saya akan merekomendasikan untuk menambahkan beberapa pertanyaan media ke style- ini @media screen and (min-width: 800px) {...} . Dalam kasus ketika konten akan sesuai dengan lebar halaman. Misalnya pada resolusi kecil akan ada kesenjangan yang tidak diperlukan, memindahkan konten ke kanan
— MarkosyanArtur
44

Saya pikir tidak. Tapi styling bodydengan overflow: scrollharus dilakukan. Anda sepertinya tahu itu.

— Michael Krelin - hacker
sumber
3
Kedengarannya bagus ... paksa halaman untuk selalu menampilkan bilah gulir apakah perlu atau tidak, ... maka tidak ada perubahan visual di antara jenis halaman.
— eidylon
1
Ya, tapi IIRC, ini menunjukkan kedua scrollbar. Saya tidak benar-benar membutuhkan yang horisontal.
— Dmitri Nesteruk
Itu benar. Tapi ada tidak banyak yang bisa saya lakukan untuk membantu Anda :( Sebenarnya, saya hanya mempertimbangkan kalimat pertama dari jawaban saya menjadi nyata jawaban yang berhubungan dengan pertanyaan.
— Michael Krelin - hacker
49
overflow-y: scroll:)
— Svish
2
Berikut ini adalah jawaban yang lebih baik
— Sami
36

Dengan scroll selalu ditampilkan, mungkin tidak bagus untuk tata letak.

Cobalah untuk membatasi lebar tubuh dengan css3

body {
    width: calc(100vw - 34px);
}

vwadalah lebar viewport (lihat tautan ini untuk penjelasan)
calchitung dalam css3
34px singkatan untuk lebar scrollbar ganda (lihat ini untuk diperbaiki atau ini untuk menghitung jika Anda tidak mempercayai ukuran tetap)

— Moesio
sumber
4
Semuanya sia-sia sampai seseorang membutuhkan.
— Moesio
3
Ini secara visual jauh kurang mengganggu daripada hanya memaksa scollbars seperti yang dijelaskan oleh jawaban yang diterima.
— Silas Hansen
4
Sejauh ini, ini yang terbaik untuk kebutuhan saya, saya juga menambahkan padding-left: 34px;untuk memusatkan halaman saya secara merata.
— Pat Migliaccio
3
Ini harus menjadi jawaban yang diterima, tidak seperti jawaban yang saat ini diterima itu sebenarnya menjawab pertanyaan!
— Karena
2
Ini akan menimbulkan masalah jika Anda memiliki navbar / tajuk dengan warna yang berbeda dari latar belakang tubuh atau batas bawah dll.
— Zia Ul Rehman Mughal
28 
html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

Contoh . Klik tombol "ubah ketinggian minimum".

Dengan calc(100vw - 100%)kita dapat menghitung lebar scrollbar (dan jika tidak ditampilkan, itu akan menjadi 0). Ide: dengan menggunakan margin negatif kanan, kita dapat meningkatkan lebar <html>hingga lebar ini. Anda akan melihat bilah gulir horizontal - itu harus disembunyikan menggunakan overflow-x: hidden.

— pongo
sumber
Saya harus meletakkan tubuh dalam div dan menerapkan margin ke div agar berfungsi (mirip dengan jawaban Rapti .) Tapi ini terlihat jauh lebih rapi.
— Touniouk
1
Ini berfungsi dengan baik dan sepertinya tidak menghasilkan scrollbar horizontal yang tidak diinginkan di Chrome atau Firefox. Mengapa tidak menggunakan saja calc(100% - 100vw)alih-alih mengalikan dengan-1 ?
— SystemParadox
13

Saya tidak tahu apakah ini posting lama, tetapi saya memiliki masalah yang sama dan jika Anda ingin menggulir secara vertikal, Anda harus mencoba overflow-y:scroll

13

Jika mengubah ukuran atau setelah memuat beberapa data itu menambahkan bilah gulir maka Anda dapat mencoba mengikuti, membuat kelas dan menerapkan kelas ini.

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}
— kunalkamble
sumber
3

Saya telah memecahkan masalah di salah satu situs web saya dengan secara eksplisit mengatur lebar badan javascript dengan ukuran viewport dikurangi lebar bilah gulir. Saya menggunakan fungsi berbasis jQuery yang didokumentasikan di sini untuk menentukan lebar scrollbar.

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
— Frank L
sumber
10
Saya bahkan tidak bisa mulai menjelaskan mengapa ini adalah praktik yang buruk.
— mythofechelon
20
@ BenHooper: Saya ingin tahu mengapa ini adalah praktik yang buruk.
— Saad
1
Apa yang terjadi jika Anda mengubah ukuran jendela?
— Braden Steffaniak
3

Memperluas jawaban menggunakan ini:

body {
    width: calc(100vw - 17px);
}

Satu komentator menyarankan menambahkan padding kiri juga untuk menjaga centering:

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

Tetapi hal-hal tidak terlihat benar jika konten Anda lebih luas dari viewport. Untuk memperbaikinya, Anda dapat menggunakan kueri media, seperti ini:

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

Di mana 1058px = lebar konten + 17 * 2

Ini memungkinkan scrollbar horizontal menangani x overflow dan membuat konten terpusat terpusat ketika viewport cukup lebar untuk memuat konten lebar tetap Anda

— Greg St.Onge
sumber
3

Memperluas jawaban Rapti , ini seharusnya bekerja dengan baik, tetapi menambahkan lebih banyak margin di sisi kanan bodydan menyembunyikannya dengan htmlmargin negatif , daripada menambahkan bantalan tambahan yang berpotensi mempengaruhi tata letak halaman. Dengan cara ini, tidak ada yang berubah pada halaman aktual (dalam kebanyakan kasus), dan kode ini masih berfungsi.

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}
— Berikan Gryczan
sumber
Saya menemukan bahwa di chrome ini menambahkan gulir horizontal pada halaman yang memiliki bilah gulir vertikal di situs bootstrap saya.
— Ginger Squirrel
Sudahkah Anda mencoba mencari tahu mengapa? Periksa inspektur elemen dan lihat apakah Bootstrap mengacaukan margin, scrollbar, atau semacamnya.
— Berikan Gryczan
1
Mungkin itu ada hubungannya dengan margin 15px yang diletakkan bootstrap pada semuanya, ketika memeriksa halaman margin kontainer jatuh di bawah scrollbar. Saya melamar overflow-x: hiddendan memperbaikinya.
— Ginger Squirrel
3

Solusi @ kashesandr bekerja untuk saya tetapi untuk menyembunyikan scrollbar horizontal saya menambahkan satu gaya lagi untuk tubuh. di sini adalah solusi lengkap:

CSS

<style>
/* prevent layout shifting and hide horizontal scroll */
html {
  width: 100vw;
}
body {
  overflow-x: hidden;
}
</style>

JS

$(function(){
    /**
     * For multiple modals.
     * Enables scrolling of 1st modal when 2nd modal is closed.
     */
    $('.modal').on('hidden.bs.modal', function (event) {
      if ($('.modal:visible').length) {
        $('body').addClass('modal-open');
      }
    });
});

Solusi JS Only (ketika modal ke-2 dibuka dari modal ke-1):

/**
 * For multiple modals.
 * Enables scrolling of 1st modal when 2nd modal is closed.
 */
$('.modal').on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
    $('body').css('padding-right', 17);
  }
});
— Hassan Tareq
sumber
2

Saya mencoba untuk memperbaiki kemungkinan masalah yang sama yang disebabkan oleh .modal-openkelas bootstrap twitter diterapkan body. Solusinya html {overflow-y: scroll}tidak membantu. Salah satu solusi yang mungkin saya temukan adalah menambahkan {width: 100%; width: 100vw}ke htmlelemen.

— kashesandr
sumber
1
atau ubah ke badan {overflow-y: scroll}
— Ruben
1
Tapi itu akan selalu menampilkan bilah gulir bahkan jika itu tidak diperlukan.
— Rapti
Anda harus menjelaskan mengapa Anda menetapkan lebar dua kali? html { width: 100vw; }bekerja untuk saya
— Hassan Tareq
Bagi saya, ini sebenarnya menciptakan dua scrollbar
— rbansal
2

Saya dulu memiliki masalah itu, tetapi cara paling mudah untuk memperbaikinya adalah ini (ini berfungsi untuk saya):

pada jenis file CSS:

body{overflow-y:scroll;}

sesederhana itu! :)

— Melvin Guerrero
sumber
2

Solusi yang diposting menggunakan calc (100vw - 100%) ada di jalur yang benar, tetapi ada masalah dengan ini: Anda akan selamanya memiliki margin di sebelah kiri ukuran scrollbar, bahkan jika Anda mengubah ukuran jendela sehingga konten mengisi seluruh viewport.

Jika Anda mencoba menyiasatinya dengan kueri media, Anda akan memiliki momen gertakan yang canggung karena margin tidak akan semakin kecil saat Anda mengubah ukuran jendela.

Inilah solusi yang mengatasi itu dan AFAIK tidak memiliki kekurangan:

Alih-alih menggunakan margin: otomatis untuk memusatkan konten Anda, gunakan ini:

body {
margin-left: calc(50vw - 500px);
}

Ganti 500px dengan setengah lebar maksimum konten Anda (jadi dalam contoh ini, lebar maksimum konten adalah 1000px). Konten sekarang akan tetap terpusat dan margin akan semakin berkurang sampai konten memenuhi viewport.

Untuk menghentikan margin agar tidak negatif ketika viewport lebih kecil dari max-width, tambahkan saja kueri media seperti ini:

@media screen and (max-width:1000px) {
    body {
        margin-left: 0;
    }
}

Dan lagi!

— Jonathan SI
sumber
2

Jika lebar tabel tidak akan berubah, Anda dapat mengatur lebar elemen (seperti tbody) yang berisi bilah gulir> 100% (memungkinkan ruang tambahan untuk bilah gulir) dan mengatur overflow-y untuk "overlay" (jadi bahwa bilah gulir tetap tetap, dan tidak akan menggeser tabel ke kiri saat muncul). Juga atur ketinggian tetap untuk elemen dengan bilah gulir, sehingga bilah gulir akan muncul setelah ketinggian terlampaui. Seperti itu:

tbody {
  height: 100px;
  overflow-y: overlay;
  width: 105%
}

Catatan: Anda harus menyesuaikan lebar% secara manual karena% ruang yang digunakan bilah gulir akan relatif terhadap lebar meja Anda (yaitu: lebar meja yang lebih kecil, lebih banyak% yang diperlukan agar sesuai dengan bilah gulir, karena ukurannya dalam piksel konstan) )

Contoh tabel dinamis:

function addRow(tableID)
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
  
    for(var i=0; i<colCount; i++)
    {
        var newRow = row.insertCell(i);

        newRow.innerHTML = table.rows[0].cells[i].innerHTML;
        newRow.childNodes[0].value = "";
    }
}
 
function deleteRow(row)
{
    var table = document.getElementById("data");
    var rowCount = table.rows.length;
    var rowIndex = row.parentNode.parentNode.rowIndex;

    document.getElementById("data").deleteRow(rowIndex);
}
.scroll-table {
  border-collapse: collapse;
}

.scroll-table tbody {
  display:block;
  overflow-y:overlay;
  height:60px;
  width: 105%
}

.scroll-table tbody td {
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
}

.scroll-table thead tr {
  display:block;
}

.scroll-table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

.scroll-table td:first-child {
    border-left: thin solid;
}

.scroll-table td:last-child {
    border-right: thin solid;
}

.scroll-table tr:first-child {
    display: none;
}

.delete_button {
    background-color: red;
    color: white;
}

.container {
  display: inline-block;
}

body {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="test_table.css">
</head>

<body>
<h1>Dynamic Table</h1>
<div class="container">

  <table id="data" class="scroll-table">
    <tbody>
      <tr>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
      </tr>
    </tbody>
  </table>

  <input type="button" value="Add" onclick="addRow('data')" />

</div>

<script src="test_table.js"></script>
</body>
</html>
Luaskan cuplikan

— Robert James Mieta
sumber
1

Cukup dengan mengatur lebar elemen kontainer Anda seperti ini akan melakukan trik

width: 100vw;

Ini akan membuat elemen itu mengabaikan scrollbar dan berfungsi dengan warna latar belakang atau gambar.

— Barsonax
sumber
-3

Saya menggunakan beberapa jquery untuk menyelesaikan ini

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});
— Will McMillian
sumber
3
Kemungkinan Anda mendapat penerimaan yang buruk atas jawaban Anda karena solusi ini membutuhkan keseluruhan kerangka kerja JavaScript. "jQuery semua hal!"
— Paul Lammertsma
3
yeah, jQuery adalah pasti cara untuk pergi - doxdesk.com/img/updates/20091116-so-large.gif
— Annonymous
-4 
@media screen and (min-width: 1024px){
    body {
    min-height: 700px
    }
}
— Vicky
sumber
Selamat Datang di Stack Overflow! Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda. Tolong juga cobalah untuk tidak membuat kerumunan kode Anda dengan komentar penjelasan, ini mengurangi keterbacaan kode dan penjelasan!
— Andrew Myers
-5

Berlawanan dengan jawaban yang diterima yang menyarankan bilah gulir permanen di jendela browser bahkan jika konten tidak meluap layar , saya lebih suka menggunakan:

html{
  height:101%;
}

Ini karena tampilan bilah gulir lebih masuk akal jika kontennya benar-benar meluap .

Ini lebih masuk akal daripada ini .

— Nikunj Madhogaria
sumber
1
Setidaknya kalimat terakhir salah dalam jawaban Anda. Masuk akal mirip dengan kelebihan halaman kosong yang dicetak oleh printer.
— vp_arth
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.