ทำให้แถบเลื่อนหลักมองเห็นได้ตลอดเวลา

CSS ใดที่จำเป็นในการทำให้แถบเลื่อนแนวตั้งของเบราว์เซอร์ยังคงปรากฏให้เห็นเมื่อผู้ใช้เยี่ยมชมหน้าเว็บ (เมื่อหน้ามีเนื้อหาไม่เพียงพอที่จะเปิดใช้งานแถบเลื่อน)

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

ทำให้แถบเลื่อนสามารถมองเห็นได้และใช้งานได้เมื่อจำเป็นเท่านั้น

อัปเดต: หากการใช้งานด้านบนไม่สามารถใช้งานได้เพียงแค่นี้

html {
    overflow-y:scroll;
}

ตรวจสอบให้แน่ใจว่าได้ตั้งค่าโอเวอร์โฟลว์เป็น "เลื่อน" ไม่ใช่ "อัตโนมัติ" ด้วยที่กล่าวไว้ใน OS X Lion การตั้งค่าโอเวอร์โฟลว์เป็น "เลื่อน" จะทำงานเหมือนอัตโนมัติในแถบเลื่อนนั้นจะยังคงแสดงเฉพาะเมื่อมีการใช้งาน ดังนั้นหากวิธีการแก้ปัญหาข้างต้นไม่ปรากฏว่าใช้งานได้อาจเป็นสาเหตุ

นี่คือสิ่งที่คุณจะต้องแก้ไข:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

คุณสามารถจัดสไตล์ได้ตามต้องการหากคุณไม่ชอบค่าเริ่มต้น

สิ่งต่าง ๆ มีการเปลี่ยนแปลงในปีที่ผ่านมา คำตอบข้างต้นไม่ถูกต้องในทุกกรณีอีกต่อไป Apple กำลังผลักแถบเลื่อนที่หายไปทุกที่ Safari, Chrome และ Firefox บน MacOs (และ iOs) แสดงเฉพาะแถบเลื่อนเมื่อเลื่อนจริง - ฉันไม่รู้เกี่ยวกับ Windows / IE ปัจจุบัน อย่างไรก็ตามมีวิธีที่ไม่เป็นมาตรฐานในการกำหนดสไตล์ของแถบเลื่อนบน Webkit (IE ลดลงเมื่อนานมาแล้ว)

html {
    overflow-y: scroll;
}

นั่นคือสิ่งที่คุณต้องการ?

แต่น่าเสียดายที่ Opera 9.64 ดูเหมือนจะไม่สนใจว่าการประกาศ CSS เมื่อนำไปใช้HTMLหรือBODYแม้ว่ามันจะทำงานสำหรับองค์ประกอบระดับบล็อกอื่น ๆ DIVเช่น

html {height: 101%;}

ฉันใช้โซลูชันข้ามเบราว์เซอร์นี้ (หมายเหตุ: ฉันมักจะใช้การประกาศ DOCTYPE ในบรรทัดที่ 1 ฉันไม่รู้ว่ามันทำงานในโหมด quirksmode ไม่เคยทดสอบเลย )

สิ่งนี้จะแสดงแถบเลื่อนแนวตั้ง ACTIVEในทุก ๆ หน้าแถบเลื่อนแนวตั้งจะสามารถเลื่อนได้เพียงไม่กี่พิกเซล

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

ในกรณีที่คุณกำลังหมกมุ่นอยู่กับการตรวจสอบความถูกต้องของ CSS (ฉันกำลังหมกมุ่นอยู่กับการตรวจสอบความถูกต้องของ HTML เท่านั้น) โดยใช้โซลูชันนี้รหัส CSS ของคุณจะตรวจสอบความถูกต้องสำหรับ W3C เพราะคุณไม่ได้ใช้ -moz-scrollbars-vertical

body { height:101%; } จะ "ครอบตัด" หน้าใหญ่

ฉันใช้:

body { min-height:101%; }

ฉันสามารถทำให้มันทำงานได้โดยการเพิ่มลงในแท็ก body ดีกว่าสำหรับฉันเพราะฉันไม่มีอะไรในองค์ประกอบ html

body {
    overflow-y: scroll;
}

วิธีอื่นคือการตั้งค่าความกว้างขององค์ประกอบ html เป็น 100vw ในหลาย ๆ เบราว์เซอร์ส่วนใหญ่ไม่ใช่สิ่งนี้จะลบล้างผลของแถบเลื่อนที่มีต่อความกว้าง

html { width: 100vw; }

การตั้งค่าความสูงเป็น 101% เป็นวิธีแก้ปัญหาของฉัน หน้าเว็บของคุณจะไม่ 'สะบัด' อีกต่อไปเมื่อสลับระหว่างหน้าเว็บที่เกินความสูงวิวพอร์ตและหน้าเว็บที่ไม่มี

body { 
    min-height: 101vh; 
} 

ทำงานได้ดีที่สุดสำหรับฉัน

ฉันทำนี่:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

จากนั้นฉันไม่ต้องดูแถบเลื่อนสีเทาที่น่าเกลียดเมื่อไม่จำเป็น