ป้องกันไม่ให้แถบเลื่อนเพิ่มขึ้นในความกว้างของหน้าบน Chrome

ฉันมีปัญหาเล็กน้อยในการพยายามทำให้หน้า. html ของฉันมีความกว้างที่สม่ำเสมอบน Chrome ตัวอย่างเช่นฉันมีหน้า (1) ที่มีเนื้อหาจำนวนมากที่ล้นความสูงของวิวพอร์ต (คำขวา?) ดังนั้นจึงมีแถบเลื่อนแนวตั้ง ในหน้านั้น (1) ในหน้า (2) ฉันมีเค้าโครงเหมือนกัน (เมนู, div, ... ฯลฯ ) แต่มีเนื้อหาน้อยกว่าจึงไม่มีแถบเลื่อนแนวตั้งอยู่ในนั้น

ปัญหาคือในหน้า (1) แถบเลื่อนดูเหมือนจะดันองค์ประกอบไปทางซ้ายเล็กน้อย (เพิ่มความกว้าง?) ในขณะที่ทุกอย่างปรากฏตรงกลางหน้า (2)

ฉันยังคงเป็นมือใหม่ใน HTML / CSS / JS และฉันค่อนข้างเชื่อว่านี่ไม่ใช่เรื่องยาก แต่ฉันไม่มีโชคในการหาวิธีแก้ปัญหา มันทำงานได้ตามที่ตั้งใจไว้ใน IE10 และ FireFox (แถบเลื่อนที่ไม่รบกวน) ฉันพบสิ่งนี้ใน Chrome เท่านั้น

คุณจะได้รับขนาดแถบเลื่อนจากนั้นใช้ระยะขอบกับคอนเทนเนอร์

สิ่งนี้:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS สำหรับลบ h-scrollbar:

body{
    overflow-x:hidden;
}

ลองดูสิ่งนี้: http://jsfiddle.net/NQAzt/

หมายเหตุ : การซ้อนทับได้รับการเลิกใช้
คุณยังสามารถใช้สิ่งนี้ได้หากจำเป็นจริงๆ แต่พยายามอย่าทำ

สิ่งนี้ใช้ได้กับเบราว์เซอร์ WebKitเท่านั้น แต่ฉันชอบมันมาก จะทำงานเหมือนautoบนเบราว์เซอร์อื่น ๆ

.yourContent{
   overflow-y: overlay;
}

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

สิ่งที่คุณต้องทำคือเพิ่ม:

html {
    overflow-y: scroll;
}

ในไฟล์ css ของคุณเนื่องจากจะมี scroller ว่าจำเป็นหรือไม่แม้ว่าคุณจะไม่สามารถเลื่อนได้

ซึ่งหมายความว่าวิวพอร์ตจะมีความกว้างเท่ากันสำหรับทั้งสองอย่าง

อาจ

html {
    width: 100vw;
}

เป็นเพียงสิ่งที่คุณต้องการ

เบราว์เซอร์ Webkit เช่น Safari และ Chrome จะลบความกว้างของแถบเลื่อนออกจากความกว้างของหน้าที่มองเห็นได้เมื่อคำนวณความกว้าง: 100% หรือ 100vw เพิ่มเติมได้ที่DM รัทเทอร์ฟอร์ดและเลื่อนหน้ากว้าง

ลองใช้overflow-y: overlayแทน

ฉันพบว่าฉันสามารถเพิ่มได้

::-webkit-scrollbar { 
display: none; 
}

ไปที่ css ของฉันโดยตรงและมันจะทำให้แถบเลื่อนมองไม่เห็น แต่ก็ยังอนุญาตให้ฉันเลื่อนได้ (อย่างน้อยใน Chrome) เหมาะสำหรับเมื่อคุณไม่ต้องการให้แถบเลื่อนเสียสมาธิบนหน้าเว็บของคุณ!

สำหรับคอนเทนเนอร์ที่มีความกว้างคงที่โซลูชันเบราว์เซอร์ข้าม CSS แบบบริสุทธิ์สามารถทำได้โดยการรวมคอนเทนเนอร์ไว้ใน div อื่นและใช้ความกว้างเดียวกันกับทั้งสอง div

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

คลิกที่นี่เพื่อดูตัวอย่างCodepen

ดูเหมือนว่าคำตอบอื่นของฉันจะไม่ได้ผลในขณะนี้ (แต่ฉันจะพยายามทำให้มันใช้งานได้ต่อไป)

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

นี้ตัวอย่างที่แสดงให้เห็นวิธี hacky มากขึ้นของการบรรลุเป้าหมายนั้นโดย hardcoding widths paddingแทนการพยายามที่จะได้รับเบราว์เซอร์ที่จะทำเพื่อเราผ่านทาง
หากเป็นไปได้นี่เป็นวิธีแก้ปัญหาที่ง่ายที่สุดหากคุณไม่ต้องการแถบเลื่อนแบบถาวร

_{แก้ไข:คำตอบนี้ไม่ถูกต้องในขณะนี้โปรดดูคำตอบอื่นของฉันเพื่อดูว่าฉันพยายามทำอะไรที่นี่ ฉันกำลังพยายามแก้ไข แต่ถ้าคุณสามารถให้ความช่วยเหลือได้โปรดแสดงความคิดเห็นขอบคุณ!}

การใช้padding-rightจะช่วยลดการปรากฏขึ้นอย่างกะทันหันของแถบเลื่อน

ตัวอย่าง

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

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

โดยที่ 300 px เป็นครึ่งหนึ่งของความกว้างหน้าต่างโต้ตอบของฉัน

นี่เป็นสิ่งเดียวที่ใช้ได้ผลสำหรับฉัน

ฉันมีปัญหาเดียวกันใน Chrome มันเกิดขึ้นสำหรับฉันเมื่อแถบเลื่อนปรากฏอยู่เสมอ (พบในการตั้งค่าทั่วไป) ฉันมีโมดอลและเมื่อฉันเปิดโมดอลฉันสังเกตเห็นว่า ...

body {
    padding-left: 15px;
}

ถูกเพิ่มเข้าไปในร่างกาย เพื่อไม่ให้สิ่งนี้เกิดขึ้นฉันได้เพิ่ม

body {
    padding-left: 0px !important;
}

ฉันไม่สามารถเพิ่มความคิดเห็นสำหรับคำตอบแรกได้และเป็นเวลานานแล้ว ... แต่การสาธิตนั้นมีปัญหา:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('scrollHeight') จะเท่ากับ b.height () เสมอ

ฉันคิดว่ามันควรจะเป็นแบบนี้:

if(b.prop('scrollHeight')>window.innerHeight) ...

ในที่สุดฉันขอแนะนำวิธีการ:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}