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

() translation by (you can also view the original English article)

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

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

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

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

เมื่อเรากล่าวถึงเบราว์เซอร์ 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 class="container">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>

    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>

    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>

</div>

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

  .container {
		  width: 400px;
		  height: 300px;
		  background-color: #DCDCDC;
		  overflow: scroll; /* showing scrollbars */
	}

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

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

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

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

1	::-webkit-scrollbar {
2	width: 15px;
3	} /* this targets the default scrollbar (compulsory) */

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

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

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */

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

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

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

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

1	body {
2	scrollbar-face-color: #b46868;
3	}

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

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

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

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

	<!-- this cssfile can be found in the jScrollPane package -->
	<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" />

	<!-- latest jQuery direct from google's CDN -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<!-- the jScrollPane script -->
	<script type="text/javascript" src="jquery.jscrollpane.min.js"></script>

	<!--instantiate after some browser sniffing to rule out webkit browsers-->
	<script type="text/javascript">
	
	  $(document).ready(function () {
	      if (!$.browser.webkit) {
	          $('.container').jScrollPane();
	      }
	  });
	
	</script>
				
</body>

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

	.jspTrack
	{
		background: #b46868; /* changed from #dde */
		position: relative;
	}

	.jspDrag
	{
		background: rgba(0,0,0,0.2); /* changed from #bbd */
		position: relative;
		top: 0;
		left: 0;
		cursor: pointer;
	}

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

สรุป

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

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

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

Custom Scrollbars in Webkit โดย Chris Coyier
Styling Scrollbar บน Webkit.org

โค้ดการปรับแต่งหน้าตา 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

2. Fancy Scrollbar - WordPress

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

3. Awesome Custom Scrollbar

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

4. DZS Scroller

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

5. CSS3 Scrollbar Styles

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