นี้
<div id="" style="overflow:scroll; height:400px;">ช่วยให้divผู้ใช้สามารถเลื่อนทั้งในแนวนอนและแนวตั้ง ฉันจะเปลี่ยนเพื่อให้ div สามารถเลื่อนได้ในแนวตั้งเท่านั้น ?
นี้
<div id="" style="overflow:scroll; height:400px;">ช่วยให้divผู้ใช้สามารถเลื่อนทั้งในแนวนอนและแนวตั้ง ฉันจะเปลี่ยนเพื่อให้ div สามารถเลื่อนได้ในแนวตั้งเท่านั้น ?
คำตอบ:
คุณได้รับการคุ้มครองนอกเหนือจากการใช้คุณสมบัติที่ผิด เลื่อนสามารถเรียกกับทรัพย์สินใด ๆoverflow, overflow-xหรือoverflow-yและแต่ละคนสามารถตั้งค่าใด ๆvisible, hidden, scroll, หรือauto inheritคุณกำลังดูสองสิ่งนี้:
auto- ค่านี้จะดูที่ความกว้างและความสูงของกล่อง หากมีการกำหนดไว้มันจะไม่ปล่อยให้กล่องขยายผ่านขอบเขตเหล่านั้น แต่ (หากเนื้อหาเกินขอบเขตเหล่านั้น) มันจะสร้างแถบเลื่อนสำหรับขอบเขต (หรือทั้งสองอย่าง) ที่เกินความยาว
scroll- ค่านี้บังคับให้แถบเลื่อนไม่ว่าอะไรก็ตามถึงแม้ว่าเนื้อหาจะไม่เกินขอบเขตที่ตั้งไว้ หากเนื้อหาไม่จำเป็นต้องถูกเลื่อนแถบจะปรากฏเป็น "ปิดการใช้งาน" หรือไม่โต้ตอบ
หากคุณเสมอต้องการเลื่อนแนวตั้งจะปรากฏ:
overflow-y: scrollคุณควรใช้ สิ่งนี้บังคับให้แถบเลื่อนปรากฏขึ้นสำหรับแกนแนวตั้งว่าจำเป็นหรือไม่ หากคุณไม่สามารถเลื่อนบริบทได้จริงมันจะปรากฏเป็นแถบเลื่อน "ถูกปิดใช้งาน"
หากคุณต้องการให้แถบเลื่อนปรากฏขึ้นหากคุณสามารถเลื่อนกล่อง:
overflow: autoใช้เพียงแค่ เนื่องจากเนื้อหาของคุณตามค่าเริ่มต้นแบ่งเป็นบรรทัดถัดไปเมื่อไม่สามารถพอดีกับบรรทัดปัจจุบันแถบเลื่อนแนวนอนจะไม่ถูกสร้างขึ้น (เว้นแต่จะอยู่ในองค์ประกอบที่ปิดใช้งานการตัดคำ) สำหรับแถบแนวตั้งจะอนุญาตให้เนื้อหาขยายได้ตามความสูงที่คุณระบุ หากเกินความสูงนั้นจะแสดงแถบเลื่อนแนวตั้งเพื่อดูเนื้อหาที่เหลือ แต่จะไม่แสดงแถบเลื่อนหากไม่เกินความสูง
ลองแบบนี้
<div style="overflow-y: scroll; height:400px;">สำหรับความสูงวิวพอร์ต 100% ให้ใช้:
overflow: auto;
max-height: 100vh;ใช้overflow-y: auto;กับ div
นอกจากนี้คุณควรตั้งค่าความกว้างเช่นกัน
autoค่าเริ่มต้น โดยทั่วไปนั่นหมายถึงความกว้าง 100% ของผู้ปกครอง แต่ไม่เสมอไป
คุณสามารถใช้รหัสนี้แทน
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x : คุณสมบัติ overflow-x ระบุว่าจะทำอย่างไรกับขอบซ้าย / ขวาของเนื้อหา - หากล้นพื้นที่เนื้อหาขององค์ประกอบ
overflow-y : คุณสมบัติ overflow-y ระบุว่าจะทำอย่างไรกับขอบด้านบน / ล่างของเนื้อหา - หากล้นพื้นที่เนื้อหาขององค์ประกอบ
ค่าที่
มองเห็นได้ : ค่าเริ่มต้น เนื้อหาไม่ได้ถูกตัดออกและอาจแสดงผลนอกกล่องเนื้อหา
ซ่อน : เนื้อหาถูกตัด - และไม่มีกลไกการเลื่อน
เลื่อน : เนื้อหาถูกตัดและมีกลไกการเลื่อน
อัตโนมัติ : ควรทำให้กลไกการเลื่อนถูกจัดเตรียมไว้สำหรับกล่องที่ล้น
initial : ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น
สืบทอดรับคุณสมบัตินี้จากองค์ประกอบหลัก
คุณสามารถใช้overflow-y: scrollสำหรับการเลื่อนแนวตั้ง
<div style="overflow-y:scroll; height:400px; background:gray">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>ปัญหากับคำตอบทั้งหมดเหล่านี้สำหรับฉันคือพวกเขาไม่ตอบสนอง ฉันต้องมีความสูงคงที่สำหรับผู้ปกครองที่ฉันไม่ต้องการ ฉันไม่ต้องการเสียเวลาไปกับการค้นหาสื่อด้วยซ้ำ หากคุณใช้มุมคุณสามารถใช้แท็บ bootstraps และมันจะทำงานหนักสำหรับคุณ คุณจะสามารถเลื่อนเนื้อหาภายในและมันจะตอบสนอง เมื่อคุณตั้งค่าแท็บให้ทำดังนี้: $scope.tab = { title: '', url: '', theclass: '', ative: true };... ประเด็นคือคุณไม่ต้องการชื่อหรือไอคอนรูปภาพ จากนั้นซ่อนโครงร่างของแท็บใน cs ดังนี้:
.nav-tabs {
border-bottom:none;
} และสิ่งนี้.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
และในที่สุดก็เพื่อลบแท็บที่มองไม่เห็นที่คุณยังสามารถคลิกถ้าคุณไม่ได้ใช้:.nav > li > a {padding:0px;margin:0px;}
overflow-xและoverflow-yใน CSS3 ซึ่งทำสิ่งที่คุณต้องการ