ฉันจะเพิ่มแถบเลื่อนแนวตั้งให้กับ div โดยอัตโนมัติได้อย่างไร

110

ฉันต้องการเพิ่มแถบเลื่อนแนวตั้งใน<div>ไฟล์. ฉันได้ลองoverflow: autoแล้ว แต่ใช้งานไม่ได้ ฉันได้ทดสอบโค้ดของฉันใน Firefox และ Chrome แล้ว

ฉันวางโค้ดสไตล์ div ที่นี่:

float: left;
width: 1000px;
overflow: auto;

— เจย์
แหล่งที่มา

jsfiddle หรือมากกว่า css พร้อมมาร์กอัปของคุณ

— Ritabrata Gautam

12

ลองนี้overflow-y:scrollและบางส่วนมีความสูง อ่านเอกสารนี้

— Mr_Green

ขอบคุณ Mr_Green สำหรับการตอบกลับของคุณ แต่รหัสนี้ใช้ไม่ได้สำหรับฉัน

— เจ

เพื่อให้การทำงานเลื่อนเนื้อหาภายในควรล้น

— Mr_Green

โพสต์รหัส html และ css ของคุณที่นี่

— Mr_Green

145

คุณต้องกำหนดความสูงเพื่อให้overflow: auto;คุณสมบัติทำงานได้
เพิ่มheight: 100px;และตรวจสอบ เพื่อวัตถุประสงค์ในการทดสอบ
และจะดีกว่าถ้าคุณให้overflow-y:auto;แทนoverflow: auto;เพราะจะทำให้องค์ประกอบเลื่อนได้เฉพาะแนวตั้ง แต่ไม่ใช่แนวนอน

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

หากคุณไม่ทราบความสูงของคอนเทนเนอร์และต้องการแสดงแถบเลื่อนแนวตั้งเมื่อคอนเทนเนอร์ถึงความสูงคงที่ให้บอกว่า100pxใช้max-heightแทนheightคุณสมบัติ

สำหรับข้อมูลเพิ่มเติมโปรดอ่านบทความ MDN

— Mr_Green
แหล่งที่มา

ใช่ฉันเข้าใจและทดสอบแล้วมันใช้งานได้ดีใน Chrome แต่ไม่ใช่ใน FireFox อีกสิ่งหนึ่งที่สับสนคือ Scrollbar แนวตั้งปรากฏขึ้นในเวลาโหลดหน้าใน FF แต่หายไปเมื่อการโหลดหน้าเสร็จสมบูรณ์!

— เจ

"คุณต้องกำหนดความสูง" ตรงกับปัญหาของฉันขอบคุณ! : P

— Wagner da Silva

51

คุณต้องเพิ่มmax-heightคุณสมบัติ

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}

<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>

ขยายข้อมูลโค้ด

— DevT
แหล่งที่มา

20

คุณสามารถตั้งค่า:

overflow-y: scroll;height: XX px

2

สิ่งนี้ได้รับการแนะนำโดยคำตอบก่อนหน้านี้

— UmNyobe

15

ฉันมี scroller ที่น่าทึ่งในdiv-popupไฟล์. หากต้องการใช้ให้เพิ่มสไตล์นี้ในองค์ประกอบ div ของคุณ:

overflow-y: scroll;
height: XXXpx;

ที่heightคุณระบุจะเป็นความสูงของ div และหากคุณมีเนื้อหาเกินความสูงนี้คุณจะต้องเลื่อนมัน

ขอบคุณ.

— Ataboy Josef
แหล่งที่มา

13

หากต้องการแสดงแถบเลื่อนแนวตั้งใน div ของคุณคุณต้องเพิ่ม

height: 100px;   
overflow-y : scroll;

หรือ

height: 100px; 
overflow-y : auto;

— ริคาร์โดโรโม
แหล่งที่มา

10

ฉันไม่ค่อยแน่ใจว่าคุณกำลังพยายามใช้ div เพื่ออะไร แต่นี่เป็นตัวอย่างที่มีข้อความสุ่ม

Mr_Green ให้คำแนะนำที่ถูกต้องเมื่อเขาบอกว่าจะเพิ่มoverflow-y: autoเนื่องจาก จำกัด การเลื่อนในแนวตั้ง นี่คือตัวอย่าง JSFiddle:

JSFiddle

— MitulP91
แหล่งที่มา

ก่อนอื่น @Mr_Green คำแนะนำของคุณใช้งานได้ดีใน Chrome แต่ไม่ใช่ใน FF และมีทางเลือกอื่นในการเพิ่มความสูงหรือไม่เพราะฉันไม่สามารถเพิ่มความสูงให้กับ Div สำหรับโครงสร้างการออกแบบของฉันได้

— เจ

2

::-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);
}

ขยายข้อมูลโค้ด

— คุรุประศาสน์
แหล่งที่มา

2

โปรดเพิ่มคำอธิบายในคำตอบของคุณ

— Mastisa

แหล่งที่มา (และคำอธิบาย) น่าจะเป็น: simurai.com/blog/2011/07/26/webkit-scrollbar

— cobberboy