30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS
Webdesign

Quick Tip: การใส่ CSS กับ Scrollbar เพื่อให้เข้ากับ UI ของคุณ

by
Length:LongLanguages:

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

เคล็ดลับสั้นๆ นี้ จะพาคุณไปพัฒนาหน้าตาของ scrollbar เพื่อออกแบบมันให้เข้ากับ UI ของคุณ เราจะเจาะจงไปที่เบราว์เซอร์ WebKit เป็นหลักเพราะมันอนุญาตให้เราเขียน CSS ใส่มันได้อีกทั้งเราจะใช้ jQuery fallback เพื่อจัดการกับเบราว์เซอร์ตัวอื่นๆ

มองหาวิธีที่ง่ายกว่านี้หรือ

ถ้าคุณต้องการความช่วยเหลือเกี่ยวกับการใส่สไตล์ CSS ให้กับ Component ของเว็บไซต์ของคุณ มันจะรวดเร็วกว่าถ้าคุณสามารถขอความช่วยเหลือจากมืออาชีพได้ ทาง Envato นั้นมืออาชีพที่พร้อมช่วยเหลือเกี่ยวกับการใส่สไตล์ CSS ใหม่ๆ หรือปรับแต่งให้เข้ากับ Web Component ที่คุณมี

Web component services on Envato Studio

สั้นๆ เกี่ยวกับเบราว์เซอร์

เมื่อเรากล่าวถึงเบราว์เซอร์ Webkit แล้ว เรามักหมายถึง Apple Safari และ Google Chrome ทั้งคู่นั้นครองตลาดกว่า 40% ของเบราว์เซอร์บนเครื่อง Desktop สำหรับ Tablet นั้น Apple iPad นั้นจะใช้ Webkit ไม่ว่าบริษัทไหนจะใช้เบราว์เซอร์อะไรก็ตาม Google นั้นก็ยังเพิ่ม Chrome ไปในผลิตภัณฑ์ของพวกเขาด้วยเช่น Android OS และ Chromebook แน่นอนพวกมันใช้เทคโนโลยีจาก Google Chrome

มองดูที่ภาพเหล่านี้สิ มันค่อนข้างเป็นอนาคตที่สนใจสำหรับการสร้างสีสำหรับ Scrollbar เลย


ขั้นที่ 1 ทำหน้าง่ายๆ ที่มี Scrollbar

ก่อนที่เราจะเริ่มด้วยหัวข้อการใส่ style ให้กับ scrollbar ของเราด้วย CSS เราต้องการตัวอย่างที่สามารถทำงานได้จริง หน้าเปล่าๆ ที่ scrollbar จะแสดงออกมาถ้าเกิด

  • เนื้อหานั้นใหญ่กว่า window ที่มองเห็นได้ (scrollbar นั้นจะปรากฏอยู่ทางด้านขวา)
  • textarea นั้นต้องประกอบด้วยข้อความที่เพียงพอที่จะให้ scrollbar ปรากฏขึ้น
  • ใช้บน iframe เมื่อต้องการแสดงหน้าต่างออกไป
  • div หรือ block element อื่นๆ ที่มี overflow property ตั้งค่าไว้

สำหรับตัวอย่างนี้ เราจะไปที่ตัวเลือกสุดท้าย นี่คือมาร์คอัพเริ่มต้นของเรา

มันก็เป็นแค่ div ที่ประกอบด้วยเนื้อหาหลอกๆ และที่นี่เราจะเริ่มเขียน CSS เริ่มต้น ที่ซึ่งระบุขนาดเฉพาะของ div และเป็นตัวจุดชนวนสร้างเหตุการณ์การแสดง Scrollbar ทั้ง horizontal และ vertical scrollbar

คุณนั้นยังสามารถมองเห็นบางสิ่งบางอย่างเหมือนอย่างนี้


ขั้นที่ 2 เริ่มต้นด้วยเบราว์เซอร์ Webkit 

ย้อนกลับไป (หลายปีที่ผ่านมา) CSS Pseudo Element นั้นได้รับการแนะนำในเบราว์เซอร์ Webkit เพื่อที่จะระบุตำแหน่งของ scrollbar มันสร้างโอกาสในการสไตล์หน้าเพจให้เข้ากับ theme ของคุณ

เริ่มเขียนสไตล์ให้บางอันได้แล้ว โดยเริ่มใช้ -webkit- prefix และ webkit custom scrollbar properties จำไว้ว่าที่เราทำนั้นคือพร้อพเพอร์ตี้พื้นฐานของ CSS เท่านั้น สำหรับทำความเข้าใจได้โดยง่าย ส่วนการอธิบายนั้นอยู่ในคอมเม้นต์

เมื่อใช้ pseudo element ที่แสดงอันนี้ Webkit จะปิดการ render built-in scrollbar ของมัน และใช้โค้ดที่ให้ไว้ใน CSS แทน - Surfin' Safari

และหลักจากนี้สำหรับ pseudo-element อื่นๆ

หลังจากเพิ่ม CSS นี้เข้าไป คุณจะสามารถเห็นเอฟเฟ็กต์เหล่านี้อีกครั้ง (แค่เบราว์เซอร์ Webkit เท่านั้น)

ลองดูสิ Internet Explorer นั้นมี Scrollbar Style ของตัวเอง

นั่นแหละถูกต้องแล้ว ความเป็นจริง IE นั้นเป็นเบราว์เซอร์แรกที่ให้การ support การเขียนสไตล์เข้ากับ scrollbar ผ่าน CSS นี่ย้อนหลังกลับไปในวันเก่าๆ ที่ใช้ IE 5.5 แต่เพียงแค่สีเท่านั้นที่มีการเปลี่ยนแปลง

พร้อพเพอร์ตี้เหล่านี้ก็ยังสามารถใช้ได้จนถึงทุกวันนี้ ลองมองดูที่พร้อพเพอร์ตี้เดี่ยวๆ บน IE 9 ที่ใช้สำหรับการแสดงตัวอย่างดู

ดูว่ามันจะเป็นอย่างไร


ขั้นที่ 3 เขียน Fallback โค้ดให้กับเบราว์เซอร์ที่ไม่ใช่ Webkit

เพียงพอแล้วสำหรับ Webkit แต่สำหรับ Firefox, IE และ Opera สามารถร่วมสนุกได้ พวกมันก็มีส่วนสวยงามที่ต้องเขียน fallback เช่นกัน ในรูปแบบ jScrollPane สำหรับ jQuery plugin นี้ถูกพัฒนาขึ้นโดย Kelvin Luck และมันสามารถเป็นทาสรับใช้เราตลอดทั้งวัน

เว็บไซต์ของ Kelvin นั้นมีตัวอย่างที่ดีจำนวนมาก แต่สำหรับพื้นฐานการใช้ทั้งหมดที่เราต้องทำคือการดาวโหลดไฟล์ jQuery และ jScrollPane และ สร้างมันด้วยวิธีการต่างๆ ต่อไปนี้

แค่สำหรับจุดประสงค์ของการทำให้กับเข้า theme ลองเปิด jquery.jscrollpane.css และลองแก้ไขบรรทัดเหล่านี้ดูด้วยค่าสีที่ต่างกัน (สำหรับการเพิ่มประสิทธิภาพนั้นคุณอาจต้องการใส่สไตล์ทั้งหมดวไว้ที่ไฟล์ของคุณ)

นี่คือตัวอย่างหน้าตาที่เราจะเห็นได้ใน Firefox


สรุป

เว็บแอพเช่น Gmail หรือ Google+ (เหมือนกับตัวอย่างอื่นๆ) นั้นจัดการกับไอเดียนี้ ถ้าความต้องการยังมีต่อไป บางที Firefox หรือ IE นั้นจะเตรียมวิธีการทำในแบบของพวกมันเองให้เราไว้แล้ว

ผมหวังว่าคุณจะชื่นชอบเทคนิคสั้นๆ นี้เราผมนั้นจะคอยติดตามดูว่า scrollbar แบบไหนที่ทำให้การออกแบบนั้นดูดีและใช้ได้จริง


อ่านเพิ่มเติมได้ที่

โค้ดการปรับแต่งหน้าตา Scrollbar บน Envato Market

ถ้าคุณกำลังมองหาโซลูชั่นที่พร้อมแล้ว Envato Market นั้นขอเสนอโค้ด scrollbars สำเร็จรูปที่คุณสามารถเอาใส่ในเว็บไซต์ของคุณได้ทันที เพื่อให้เกิดประสิทธิภาพสูงที่สุด นี่คือที่ๆ คุณสามารถหามัน

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars นั้นง่ายที่จะใช้งาน เป็น jQuery plugin ที่มาพร้อมกับแบบสำเร็จรูปแล้ว คุณสามารถ implement scrollbars เหล่านี้ได้โดยเพิ่ม class name ไปที่อิลิเมนต์ใดๆ ก็ตามที่สามารถ scroll ได้บนเว็บไซต์ของคุณ

ต้องให้แน่ใจว่าธีมเหล่านี้เข้ากันได้กับ Lazybars หรือ สร้างของคุณเองเลยด้วย CSS แบบง่ายๆ

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

“Fancy Scrollbar – WordPress” นั้นคือปลั้กอินที่สามารถสร้าง custom scrollbar บนเว็บไซต์ที่สร้างด้วย Wordpress ได้มันมีตัวเลือกให้ customize ได้มากมาย คุณสามารถปรับแต่งเรื่องสี เอฟเฟ็กต์ การดีเลย์ scroll rail strip และพารามิเตอร์อื่นๆ อีกมากมาย

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar นั้นสามารถปรับแต่งได้อย่างอิสระโดยใช้ jQuery plugin สำหรับเว็บไซต์ที่สร้างโดย Wordpress ของคุณ ด้วยปลั้กอินนี้คุณสามารถปรับแต่งเว็บเพจ scrollbar และคุณสามารถฝัง Custom Scrollbar ผ่าน shortcode ได้ที่ไหนก็ได้ที่คุณต้องการ แม้แต่ในไฟล์ของ theme คุณ

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller นั้นให้เกี่ยวกับ scrollbar สำหรับเว็บไซต์ของคุณที่ซึ่งคุณสามาถปรับแต่ได้อย่างง่ายดายผ่าน CSS ถ้า skin ทั้งสามที่ใส่ไว้นี้ไม่เพียงพอ มันยังมากับฟังก์ชันที่ปรับปรุงแล้วเหมือนกับ scroll โดยการ hover หรือ fade บน mouse leave และมันทำงานได้บน iPhone/iPad

DZS Scroller
DZS Scroller

5. CSS3 Scrollbar Styles

มันง่ายที่จะใช้ CSS3 Scrollbar ทั้งสวยและมีสีสัน สำหรับเว็บไซต์ของคุณ ง่ายๆ เพียงแค่แทรกเข้าไปในไฟล์ CSS ที่มีอยู่แล้ว และสนุกกับ CSS3 Scrollbar ใหม่กัน

CSS3 Scrollbar Styles
CSS3 Scrollbar Styles
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.