CSS - โอเวอร์โฟลว์: เลื่อน; - แสดงแถบเลื่อนแนวตั้งทุกครั้งหรือไม่

ดังนั้นปัจจุบันฉันมี:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

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

ฉันใช้ Mac และใน Chrome และ Safari แถบเลื่อนแนวตั้งจะแสดงเฉพาะเมื่อเมาส์อยู่เหนือ Div และคุณเลื่อนอย่างแข็งขัน มีวิธีที่จะแสดงมันเสมอ?

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

การแก้ไข: ใน CSS ของคุณรวมถึง -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

ปรับแต่งลักษณะตามที่ต้องการ แหล่ง

โปรดทราบเกี่ยวกับ iPad Safari โซลูชันของ NoviceCoding จะไม่ทำงานหากคุณมี - webkit-overflow-scrolling: touch;บางที่ใน CSS ของคุณ การแก้ปัญหาคือการลบการเกิดขึ้นทั้งหมด-webkit-overflow-scrolling: touch;หรือวาง-webkit-overflow-scrolling: auto;ด้วยโซลูชั่นของ NoviceCoding

มันจะใช้งานกับ iPad บน Safari บน iOS 7.1.x จากการทดสอบของฉัน แต่ฉันไม่แน่ใจเกี่ยวกับ iOS 6 อย่างไรก็ตามมันจะไม่ทำงานบน Firefox มีปลั๊กอิน jQuery ซึ่งมีวัตถุประสงค์เพื่อเป็นไปตามเบราว์เซอร์ข้ามเรียกว่าเป็นJScrollPane

นอกจากนี้ยังมีโพสต์ซ้ำที่นี่ใน Stack Overflowซึ่งมีรายละเอียดอื่น ๆ

สิ่งนี้จะทำให้แถบเลื่อนปรากฏขึ้นเสมอเมื่อมีเนื้อหาภายในหน้าต่างที่ต้องเลื่อนเพื่อเข้าถึงมันจะใช้กับหน้าต่างและแอพทั้งหมดใน Mac:

เรียกใช้การตั้งค่าระบบจากเมนู Apple คลิกที่แผงการตั้งค่า“ ทั่วไป” ค้นหา 'แสดงแถบเลื่อน' และเลือก radiobox ถัดจาก "เสมอ" ปิดการตั้งค่าระบบเมื่อเสร็จสิ้น