ปิดใช้งานการเลื่อนแนวนอน [ปิด]

ตกลงด้วยเหตุผลบางอย่างที่หน้าเว็บของฉันเลื่อนจากซ้ายไปขวาและแสดงพื้นที่ที่น่าเกลียดมาก

ฉันค้นหาผลลัพธ์ แต่พวกเขาเพิ่งทำแถบเลื่อนHIDDEN

ตอนนี้เป็นสิ่งที่ฉันต้องการฉันต้องการปิดใช้งานคุณสมบัติการเลื่อนในแนวนอน ฉันไม่ต้องการให้ผู้ใช้สามารถเลื่อนจากซ้ายไปขวาบนหน้าของฉันเพียงแค่เลื่อนขึ้นและลง!

ฉันลองแล้ว: overflow-x:hiddenใน css บนhtmlแท็กของฉันแต่มันทำให้แถบเลื่อนถูกซ่อนและไม่ได้ปิดการใช้งานการเลื่อน

โปรดช่วยฉันด้วย!

นี่คือลิงค์ไปยังหน้า: http://www.green-panda.com/usd309bands/ (ลิงค์เสีย)

นี่อาจทำให้คุณมีความคิดที่ดีขึ้นเกี่ยวกับสิ่งที่ฉันกำลังพูดถึง

นี่คือเมื่อหน้าแรกโหลด:

และนี่คือหลังจากที่ฉันเลื่อนไปทางขวา:

ลองเพิ่มสิ่งนี้ลงใน CSS ของคุณ

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

นี่เป็นลูกที่น่ารังเกียจของรหัสของคุณ :)

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

แทนที่ด้วย

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

ดังนั้นเพื่อแก้ไขปัญหานี้อย่างถูกต้องฉันทำสิ่งที่คนอื่นทำที่นี่และใช้ css เพื่อซ่อนแถบเครื่องมือแนวนอน:

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

จากนั้นใน js ฉันสร้างผู้ฟังเหตุการณ์เพื่อค้นหาการเลื่อนและต่อต้านผู้ใช้ที่พยายามเลื่อนแนวนอน

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

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

ฉันเห็นบางคนทำสิ่งที่คล้ายกัน แต่ดูเหมือนจะไม่ทำงาน อย่างไรก็ตามมันก็ใช้ได้ดีสำหรับฉัน

ฉันรู้ว่ามันสายเกินไปแต่มีวิธีการในจาวาสคริปต์ที่สามารถช่วยคุณตรวจสอบองค์ประกอบ html แม่มดทำให้เกิดแนวนอนล้น -> แถบเลื่อนปรากฏขึ้น

นี่คือลิงค์ไปยังโพสต์ในCSS Tricks

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

มันอาจส่งคืนสิ่งนี้:

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

จากนั้นคุณเพียงลบความกว้างพิเศษออกจากdivหรือตั้งค่าmax-width:100%

หวังว่านี่จะช่วยได้!

มันแก้ไขปัญหาให้ฉัน:]

ลองใช้อันนี้เพื่อปิดการใช้งานการเลื่อนความกว้างสำหรับร่างกายโดยเฉพาะเอกสารทั้งหมดเป็นเพียงเนื้อหา body{overflow-x: hidden;}

koala_dev ตอบว่าสิ่งนี้จะทำงาน:

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

และ MarkWPiper ให้ความเห็นว่า ": - / / การเลื่อนแบบสัมผัส / โมเมนตัมที่ทำให้หยุดทำงานบน iPhone"

ทางออกของการสัมผัส / โมเมนตัมบน iPhone คือการเพิ่มบรรทัดนี้ในบล็อก css สำหรับ html, body:

    height:auto!important;

คำตอบของ Koala_dev จะใช้ได้ แต่ในกรณีที่คุณสงสัยว่านี่คือเหตุผลว่าทำไมมันถึงได้ผล:

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

.

หากคุณต้องการปิดการใช้งานการเลื่อนแนวนอนตลอดความกว้างหน้าจอให้ใช้รหัสนี้

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

สิ่งนี้ทำงานได้ดีกว่า "100%" เพราะจะไม่สนใจความกว้างพาเรนต์และใช้วิวพอร์ตแทน

คุณสามารถลองวิธีทั้งหมดนี้ได้ในหน้า html ของเรา ..

วิธีที่ 1

body { overflow-x:hidden; }

วิธีที่ 2 คุณสามารถใช้สิ่งต่อไปนี้ในแท็ก body CSS ของคุณ:

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

ที่จะลบแถบเลื่อนของคุณ

วิธีที่ 3

body { min-width: 1167px; }

วิธีที่ 5

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

วิธีที่ 6

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

วิธีที่ 4 ..

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

ตอนนี้ฉันกำลังค้นหาข้อมูลเพิ่มเติม .. !!!!

ฉันต้องจัดการกับมันด้วยตัวเอง หลังจากทั้งหมดฉันพบวิธีนี้ง่ายที่สุดและมีประโยชน์ เพียงเพิ่ม

overflow-x: hidden;

ถึงผู้ปกครองภายนอกของคุณ ในกรณีของฉันดูเหมือนว่านี้:

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

คุณต้องใช้overflow-xเพราะถ้าคุณใช้เพียงแค่overflowคุณปิดการใช้งานการเลื่อนแนวตั้งเช่นกันoverflow-y

หากการเลื่อนแนวตั้งยังคงปิดใช้งานอยู่คุณสามารถเปิดใช้งานการเลื่อนอย่างชัดเจนด้วย:

overflow-y: scroll;

ฉันรู้ว่ามันค่อนข้างไม่ถูกวิธีเพราะถ้าทุกอย่างเป็นการเซ็ตอัพที่ดีคงไม่ต้องใช้วิธีที่รวดเร็วและสกปรก

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

คุณใช้สไตล์ข้างต้นหรือคุณสามารถสร้างฟังก์ชั่นในjavaScriptเพื่อแก้ไขปัญหานั้น

คุณสามารถแทนที่เหตุการณ์การเลื่อนเนื้อหาด้วย JavaScript และรีเซ็ตการเลื่อนแนวนอนเป็น 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;
});

ฉันไม่แนะนำให้ทำเช่นนี้เพราะมัน จำกัด การใช้งานสำหรับผู้ใช้ที่มีหน้าจอขนาดเล็ก