Yatay Kaydırmayı DEVRE DIŞI BIRAK [kapalı]

Tamam nedense web sayfam soldan sağa kayar ve çok çirkin bir alan gösterir.

Sonuçları aradım ama kaydırma çubuğunu sakladılar

Şimdi istediğim bu, yatay kaydırma özelliğini fiziksel olarak devre dışı bırakmak istiyorum . Kullanıcının sayfamda yukarı ve aşağı sola sağa kaymasını istemiyorum!

Ben denedim: overflow-x:hiddenbenim htmletiket css ama sadece kaydırma çubuğu gizli yaptı ve kaydırma devre dışı bırakmadı.

Lütfen bana yardım et!

İşte sayfaya bir bağlantı: http://www.green-panda.com/usd309bands/ (Bozuk bağlantı)

Bu, neden bahsettiğim hakkında daha iyi bir fikir verebilir:

İlk sayfalar yüklendiğinde:

Ve ben sağa kaydırdıktan sonra:

Bunu CSS'nize eklemeyi deneyin

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

Bu kodunun kötü çocuğu :)

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

ile değiştir

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

Bunu düzgün bir şekilde düzeltmek için, burada başkalarının yaptıklarını yaptım ve yatay araç çubuğunu gizlemek için css kullandım:

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

Sonra js, kaydırma aramak için bir olay dinleyicisi oluşturdum ve kullanıcıların yatay kaydırma girişiminde karşı koydu.

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

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

Birisinin benzer bir şey yaptığını gördüm, ama görünüşe göre bu işe yaramadı. Ancak bu benim için mükemmel çalışıyor.

Ben çok geç biliyorum , ama JavaScript cadı html elemanı yatay taşmasına neden oluyor tespit yardımcı olabilir bir yaklaşım var -> kaydırma çubuğu görünür

İşte CSS Tricks ile ilgili yazının bağlantısı

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

Böyle bir şey döndürebilir:

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

o zaman fazladan genişliği kaldırırsınız divveyamax-width:100%

Bu yardımcı olur umarım!

Benim için sorunu düzeltti:]

Tüm belge sadece gövde için genişlik kaydırmayı devre dışı bırakmak için bunu deneyin body{overflow-x: hidden;}

koala_dev bunun işe yarayacağını söyledi:

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

Ve MarkWPiper ": - / iPhone'da çalışmayı durdurmak için dokunma / momentum kaydırma neden oldu"

İPhone'da dokunma / momentum tutmanın çözümü, bu satırı html, body için css bloğuna eklemektir:

    height:auto!important;

Koala_dev'in cevabı işe yarayacak, ancak bunun neden çalıştığını merak ediyorsanız:

.
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.     

.

Tüm ekran genişliği boyunca yatay kaydırmayı devre dışı bırakmak istiyorsanız, bu kodu kullanın.

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

Üst genişliği yoksayar ve bunun yerine görünümü kullanır, çünkü bu "% 100" den daha iyi çalışır.

Tüm yöntemi html sayfamızdan deneyebilirsiniz ..

1. yol

body { overflow-x:hidden; }

2. yol CSS gövde etiketinizde aşağıdakileri kullanabilirsiniz:

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

Bu, kaydırma çubuğunuzu kaldıracaktır.

3. yol

body { min-width: 1167px; }

5. yol

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

6. yol

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

4. yol ..

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

Şimdi im hakkında daha fazla arama .. !!!!

Sadece bununla başa çıkmak zorunda kaldım. Sonuçta bu yöntemi en kolay ve kullanışlı buldum. Sadece ekle

overflow-x: hidden;

Dış ebeveyne. Benim durumumda şöyle görünüyor:

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

Kullanmanız gerekir, overflow-xçünkü kullanırsanız overflowdikey kaydırmayı da devre dışı bırakırsınız, yanioverflow-y

Dikey kaydırma hala devre dışı bırakılmışsa, aşağıdakilerle açıkça etkinleştirebilirsiniz:

overflow-y: scroll;

Her şey iyi kurulmuş olsaydı biri bu hızlı ve kirli yöntemi kullanmak zorunda olmaz çünkü onun biraz uygun bir yol biliyorum.

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

Yukarıdaki stili uygularsınız veya javaScript'te bu sorunu çözmek için işlev oluşturabilirsiniz

Gövde kaydırma olayını JavaScript ile geçersiz kılabilir ve yatay kaydırmayı 0 olarak sıfırlayabilirsiniz.

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;
});

Bunu yapmayı önermiyorum çünkü küçük ekranlı kullanıcılar için işlevselliği sınırlıyor.