การสร้าง Scorebar แถบเลื่อนให้กับรูปภาพและกำหนดขนาด

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

Expand view Topic review: การสร้าง Scorebar แถบเลื่อนให้กับรูปภาพและกำหนดขนาด

การสร้าง Scorebar แถบเลื่อนให้กับรูปภาพและกำหนดขนาด

by Patipat » 28/08/2019 3:40 pm

ถ้าเรามีข้อความหรือ รูปและต้องการกำหนดให้มีขนาดกรอบตามขนาดที่เราต้องการ โดยไม่ต้องตัดข้อความออก เรามีวิธีที่ใช้ CSS คือ scrollbarการสร้างแถบ Scrollbar ก็คือสร้างไว้ เพื่อกำหนดระยะกรอบได้ อย่างเช่น เรามีภาพ เรียงต่อกันยาวๆ จำนวณ 20 รูป แต่ว่าเราจะทำ scrollbar เพื่อแสดงแค่ 3 รูปและรูปที่เหลือเราสามารถเลื่อนดูได้นั่นเองครับ เรามาดูวิธีการใช้งานกันเลย

ตัวอย่างโค้ดนะครับ

Code: Select all

style="overflow: scroll;
           width: 130px;
           height: 342px;
">
ผลลัพธ์ก็คือ
เราจะได้ scrollbar มา 1 อันนะครับ
Selection_999(1036).png
Selection_999(1036).png (49.89 KiB) Viewed 509 times
ถ้าเราใช้งานแล้ว ถ้ารูปภาพไม่มี มันจะขึ้นแบบนี้ครับ เป็นว่างเปล่า โดยเราจะทำให้รูปภาพที่ไม่มี ไม่ขึ้น scrollbar ครับ
Selection_999(1035).png
ให้เราใส่ โค้ดคำว่า overflow: overlay; ลงไปครับ

Code: Select all

style="overflow: scroll;
           width: 130px;
           height: 342px;
           overflow: overlay; 
">
ผลลัพธ์ทีเราได้ก็คือ ไม่มีรูป scrollbar แล้วนะครับแต่ถ้ามีรูป ก็จะขึ้น scrollbar ให้ครับ
Selection_999(1037).png
Selection_999(1037).png (48.54 KiB) Viewed 509 times

Top