DISABLE cuộn ngang [đóng]

Ok vì một số lý do trang web của tôi cuộn từ trái sang phải và hiển thị rất nhiều không gian xấu xí.

Tôi đã tìm kiếm kết quả nhưng họ chỉ tạo ra thanh cuộn HIDDEN

Đó là những gì tôi muốn bây giờ, tôi muốn Tách rời tính năng cuộn ngang. Tôi không muốn người dùng có thể cuộn từ trái sang phải trên trang của tôi chỉ lên và xuống!

Tôi đã thử: overflow-x:hiddentrong css trên htmlthẻ của mình nhưng nó chỉ làm cho thanh cuộn bị ẩn và không vô hiệu hóa cuộn.

Làm ơn giúp tôi!

Đây là một liên kết đến trang: http://www.green-panda.com/usd309band/ (Liên kết bị hỏng)

Điều này có thể cho bạn ý tưởng tốt hơn về những gì tôi đang nói về:

Đây là khi các trang đầu tiên tải:

Và đây là sau khi tôi cuộn sang phải:

Hãy thử thêm nó vào CSS của bạn

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

đây là đứa con khó chịu của mã của bạn :)

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

thay thế bằng

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

Vì vậy, để khắc phục điều này đúng cách, tôi đã làm những gì người khác ở đây đã làm và sử dụng css để ẩn thanh công cụ ngang:

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

Sau đó, trong js, tôi đã tạo một trình lắng nghe sự kiện để tìm cuộn và chống lại những người dùng đã cố gắng cuộn ngang.

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

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

Tôi thấy ai đó làm điều gì đó tương tự, nhưng dường như điều đó không hiệu quả. Điều này tuy nhiên đang làm việc hoàn toàn tốt cho tôi.

Tôi biết rằng đã quá muộn , nhưng có một cách tiếp cận trong javascript có thể giúp bạn phát hiện phần tử html phù thủy đang khiến tràn ngang -> thanh cuộn xuất hiện

Đây là một liên kết đến bài viết trên CSS Tricks

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

nó có thể trả lại một cái gì đó như thế này:

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

sau đó bạn chỉ cần loại bỏ chiều rộng thêm từ divhoặc đặt nómax-width:100%

Hi vọng điêu nay co ich!

Nó đã khắc phục sự cố cho tôi:]

Hãy thử cách này để vô hiệu hóa cuộn chiều rộng chỉ cho phần thân, tất cả tài liệu chỉ là phần thân body{overflow-x: hidden;}

koala_dev trả lời rằng điều này sẽ hoạt động:

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

Và MarkWPiper nhận xét rằng ": - Đã khiến cảm ứng / cuộn đà bị ngừng hoạt động trên iPhone"

Giải pháp để giữ liên lạc / động lực trên iPhone là thêm dòng này vào bên trong khối css cho html, body:

    height:auto!important;

Câu trả lời của Koala_dev sẽ hoạt động, nhưng trong trường hợp bạn đang tự hỏi đây là lý do tại sao nó hoạt động:

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

.

Nếu bạn muốn tắt cuộn ngang trên toàn bộ chiều rộng màn hình, hãy sử dụng mã này.

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

Điều này hoạt động tốt hơn "100%" vì nó bỏ qua chiều rộng cha mẹ và thay vào đó sử dụng chế độ xem.

Bạn có thể thử tất cả các phương thức này trong trang html của chúng tôi ..

Cách 1

body { overflow-x:hidden; }

Cách thứ 2 Bạn có thể sử dụng cách sau trong thẻ body CSS của mình:

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

Điều đó sẽ loại bỏ thanh cuộn của bạn.

Cách thứ 3

body { min-width: 1167px; }

Cách thứ 5

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

Cách thứ 6

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

Cách thứ 4 ..

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

Bây giờ tôi đang tìm kiếm thêm .. !!!!

Tôi chỉ phải tự mình giải quyết. Sau tất cả, tôi thấy phương pháp này dễ dàng và hữu ích nhất. Chỉ cần thêm

overflow-x: hidden;

Để cha mẹ bên ngoài của bạn. Trong trường hợp của tôi, nó trông như thế này:

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

Bạn phải sử dụng overflow-xvì nếu bạn sử dụng đơn giản, overflowbạn cũng vô hiệu hóa cuộn dọc, cụ thể làoverflow-y

Nếu cuộn dọc vẫn bị tắt, bạn có thể kích hoạt nó một cách rõ ràng với:

overflow-y: scroll;

Tôi biết nó phần nào không phải là một cách thích hợp bởi vì nếu mọi thứ được thiết lập tốt, người ta sẽ không phải sử dụng phương pháp nhanh và bẩn này.

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

Bạn áp dụng kiểu trên hoặc bạn có thể tạo hàm trong javaScript để giải quyết vấn đề đó

Bạn có thể ghi đè sự kiện cuộn cơ thể bằng JavaScript và đặt lại cuộn ngang về 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;
});

Tôi không khuyên bạn làm điều này vì nó giới hạn chức năng cho người dùng có màn hình nhỏ.