Nonaktifkan Gulir Horisontal [tertutup]

Ok untuk beberapa alasan halaman web saya menggulir dari kiri ke kanan dan menunjukkan banyak ruang jelek.

Saya telah mencari hasil tetapi mereka hanya membuat scrollbar HIDDEN

Itulah yang saya inginkan sekarang, saya ingin secara fisik menonaktifkan fitur gulir horizontal. Saya tidak ingin pengguna dapat menggulir ke kiri ke kanan di halaman saya hanya naik dan turun!

Saya telah mencoba: overflow-x:hiddendi css pada htmltag saya tetapi hanya membuat scrollbar tersembunyi dan tidak menonaktifkan scroll.

Tolong bantu aku!

Berikut ini tautan ke halaman tersebut: http://www.green-panda.com/idd309bands/ (Tautan Rusak)

Ini mungkin memberi Anda ide yang lebih baik tentang apa yang saya bicarakan:

Inilah saat halaman pertama dimuat:

Dan ini setelah saya gulir ke kanan:

Coba tambahkan ini ke CSS Anda

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

ini adalah anak jahat dari kode Anda :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

gantikan dengan

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

Jadi untuk memperbaikinya dengan benar, saya melakukan apa yang dilakukan orang lain di sini dan menggunakan css untuk menyembunyikan bilah alat horizontal:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Kemudian di js, saya membuat pendengar acara untuk mencari gulir, dan menangkal pengguna mencoba gulir horizontal.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

Saya melihat seseorang melakukan sesuatu yang serupa, tetapi ternyata itu tidak berhasil. Namun ini bekerja dengan baik untuk saya.

Saya tahu ini sudah terlambat , tetapi ada pendekatan dalam javascript yang dapat membantu Anda mendeteksi elemen penyihir html menyebabkan overflow horisontal -> scrollbar muncul

Berikut ini tautan ke posting tentang Trik CSS

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Mungkin mengembalikan sesuatu seperti ini:

<div class="div-with-extra-width">...</div>

maka Anda cukup menghapus lebar ekstra dari divatau mengaturnyamax-width:100%

Semoga ini membantu!

Ini memperbaiki masalah bagi saya:]

Coba yang ini untuk menonaktifkan pengguliran lebar hanya untuk badan semua dokumen saja body{overflow-x: hidden;}

koala_dev menjawab bahwa ini akan berhasil:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

Dan MarkWPiper berkomentar bahwa ": - / Menyentuh sentuhan / momentum bergulir untuk berhenti bekerja di iPhone"

Solusi untuk menjaga sentuhan / momentum pada iPhone adalah dengan menambahkan baris ini di dalam blok css untuk html, tubuh:

    height:auto!important;

Jawaban Koala_dev akan berfungsi, tetapi jika Anda bertanya-tanya inilah alasan mengapa ia bekerja:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

.

Jika Anda ingin menonaktifkan pengguliran horizontal di seluruh lebar layar, gunakan kode ini.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

Ini berfungsi lebih baik daripada "100%" karena mengabaikan lebar induk dan sebagai gantinya menggunakan viewport.

Anda dapat mencoba semua metode ini di halaman html kami ..

Cara 1

body { overflow-x:hidden; }

Cara kedua Anda dapat menggunakan yang berikut ini di tag tubuh CSS Anda:

overflow-y: scroll; overflow-x: hidden;

Itu akan menghapus scrollbar Anda.

Cara ke-3

body { min-width: 1167px; }

Cara 5

html, body { max-width: 100%; overflow-x: hidden; }

Cara ke-6

element { max-width: 100vw; overflow-x: hidden; }

Jalan 4 ..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

Sekarang saya mencari lebih banyak .. !!!!

Saya hanya harus menghadapinya sendiri. Bagaimanapun saya menemukan metode ini paling mudah dan bermanfaat. Cukup tambahkan

overflow-x: hidden;

Untuk orang tua luar Anda. Dalam kasus saya, tampilannya seperti ini:

<body style="overflow-x: hidden;">

Anda harus menggunakan overflow-xkarena jika Anda menggunakan cukup gunakan overflowAnda menonaktifkan pengguliran vertikal juga, yaituoverflow-y

Jika pengguliran vertikal masih dinonaktifkan, Anda dapat mengaktifkannya secara eksplisit dengan:

overflow-y: scroll;

Saya tahu ini agak bukan cara yang tepat karena jika semuanya sudah diatur dengan baik kita tidak perlu menggunakan metode cepat dan kotor ini.

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

Anda menerapkan gaya di atas atau Anda dapat membuat fungsi dalam javaScript untuk menyelesaikan masalah itu

Anda dapat mengganti acara gulir tubuh dengan JavaScript, dan mengatur ulang gulir horizontal ke 0.

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

Saya tidak menyarankan melakukan ini karena membatasi fungsionalitas untuk pengguna dengan layar kecil.