ห้องทดลองโค้ดส่วนตัว !!!

ลำดับตอนที่ #2 : สกอบาร์แนวๆ WebKit Scrollbar

WebKit Scrollbar *Google chrome
ไม่แสดงผลใน IE และหมาไฟนะค่ะ โฮะๆๆ
อดเลยอ่ะดิ ฮรี่ๆ /คือเจ้าของบทความตอนี้มันเกรียนขิงๆ 

credit I'm thank u so much ;)
code@ css-tricks.com/ & almaer.com/ & numerosign.com/

theme' ©Tenpoints! | editor by The wrong hands.(It's me)

มาดูส่วนประกอบของโค้ดกันก่อน
ว่าแต่ละส่วนนั่นเรียกว่าอะไร

                                                         { /* 1 */ }         ::-webkit-scrollbar
                                                         { /* 2 */ }         ::-webkit-scrollbar-button

                                                         { /* 3 */ }         ::-webkit-scrollbar-track

                                                         { /* 4 */ }         ::-webkit-scrollbar-track-piece

                                                         { /* 5 */ }         ::-webkit-scrollbar-thumb

                                                         { /* 6 */ }         ::-webkit-scrollbar-corner

                                                         { /* 7 */ }         ::-webkit-resizer

 

โค้ดสกอบาร์อันนี้มาจากมีคนแกะขึ้นมาจาก google chrome
ได้โค้ดเป็นแบบนี้ขึ้นมา ในตอนนี้จะสอนปรับแต่งสกอบาร์ให้เป็นสไตล์เรา
เพราะโค้ดตัวนี้ปรับแต่งได้เยอะมาก ><b

มาดูข้อมูลที่เราสามารถบรรจุลงไปในโค้ดกัน

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

จะขออธิบายรายละเอียด ความหมาย
วิธีการใช้และผลที่แสดงออกมาให้ดูในแต่ละโค้ด ดังนี้

:horizontal เป็นการกำหนดสไตล์ของสกอร์ในแนวนอน ว่าจะให้มีลักษณะเป็นแบบไหน
:vertical เป็นการกำหนดสไตล์ของสกอร์ในแนวตั้ง ว่าจะให้มีลักษณะเป็นแบบไหน
:decrement ด้านหน้า หรือก่อน ใช้กับ ::-webkit-scrollbar-button

:increment ด้านหลัง หรือลำดับหลัง ใช้กับ ::-webkit-scrollbar-button

:start เริ่มการเคลื่อนไหว ใช้กับ ::-webkit-scrollbar-track-piece

:end หลังเริ่มการเคลื่อนไหว ใช้กับ ::-webkit-scrollbar-track-piece

วิธีการเขียนโค้ด
(ตัวอย่าง : สกอบาร์ในตอนนี้)

::-webkit-scrollbar-track-piece:vertical:start {

จากตัวอย่างในตอนนี้จะโค้ดส่วนที่พอเลื่อนสกอร์บาร์ลงมาจะเห็นสี...........
จะเห็นว่าเป็นโค้ดที่ชี้ตำแหน่งของสกอบาร์ที่เราจะปรับแต่ง
แปลความหมายได้ว่า เราจะปรับแต่งในส่วนที่เป็นพื้นหลังสกอบาร์(หมายเลข 4) ซึ่งเป็นสกอบาร์แนวตั้งและตอนเริ่มเคลื่อนไหว

1. <style id="so_sweet005" type="text/css">
2.    ::-webkit-scrollbar-track-piece:vertical:start { /*ส่วนที่เป็นพื้นหลัง,แนวตั้ง,เริ่มต้น*/
3.        background-image: url(________.png); /*กำหนดเป็นรูปภาพ (อย่างใดอย่างหนึ่ง)*/
4.        background-color: #______; /*กำหนดเป็นสี(อย่างใดอย่างหนึ่ง)*/
5.        border: _px dashed #______; /*ความหนาขอบ,ชนิดขอบ,สีของขอบ*/
6.    }
7. </style>

ด้านบนเป็นตัวอย่างการนำโค้ดมาปรับแต่ง ซึ่งมีนก็ได้อธิบายความหมายไว้แล้ว
(แต่ยังไม่ครบ เพราะไม่รู้มันเกี่ยวกับอะไร เข้าใจเมื่อไหร่ก็จะมาเพิ่มเติมให้ค่ะ)
ซึ่งด้านล่างก็จะเป็นโค้ดสกอร์ในการปรับแต่งพร้อมคำอธิบายในแต่ละส่วน ซึ่งสามารถนำไปใช้ได้เลยค่ะ x)

1. <style id="so_sweet005" type="text/css">
2.    ::-webkit-scrollbar {
3.        width: 15px; /*ความกว้าง(แนะนำ)*/
4.        height: 200px;} /*ความสูง(แนะนำ)*/
5.    ::-webkit-scrollbar-track-piece {
6.        background-color: #______;} /*สีพื้นหลังสกอบาร์*/
7.    ::-webkit-scrollbar-thumb {
8.        background-color: #______;} /*สีตัวเลื่อน*/
9. </style>

สำหรับใครที่ต้องการปรับแต่งและใส่รูปให้สกอร์บาร์ (ดังตัวอย่างในตอนนี้)
ก็ให้ทำรูปสกอร์บาร์มาได้เลยค่ะ โดยกำหนดขนาดเป็น 15*200 ตามขนาดของสกอร์บาร์นะค่ะ
หมายเหตุ : ถ้าเนื้อหาในหน้าเว็บฯเยอะสกอบาร์จะสั้นลงโดยการตัดส่วนล่างทิ้งไปไม่ได้ย่อรูป x)



จากนั้นก็ใช้โค้ดต่อไปนี้เลยค่ะ v

1. <style id="so_sweet005" type="text/css">
2.    ::-webkit-scrollbar {
3.        width: 15px; /*ความกว้าง(แนะนำ)*/
4.        height: 200px;} /*ความสูง(แนะนำ)*/
5.    ::-webkit-scrollbar-track-piece {
6.        background-color: #______;} /*สีพื้นหลังสกอบาร์*/
7.    ::-webkit-scrollbar-thumb {
8.        background-image: url(________.png);} /*urlภาพ หาได้จากการฝากไฟล์ ฯลฯ*/
9. </style>

สำหรับลูกเล่นอื่นๆ
(จะไม่ขออธิบายการเปลี่ยนแปลงสีหรือขนาดใดๆทั้งสิ้น สามารถนำไปประยุกต์ใช้ได้ต่อ)
เพิ่มขอบโค้ง  }{  -webkit-border-radius: 1ex;
เพิ่มเงา  }{  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
ไล่ระดับสี  }{  -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));

1. <style id="so_sweet005" type="text/css">
2.    ::-webkit-scrollbar {
3.        width: 15px; /*ความกว้าง(แนะนำ)*/
4.        height: 200px;} /*ความสูง(แนะนำ)*/
5.    ::-webkit-scrollbar-track-piece {
6.        background-color: #______;} /*สีพื้นหลังสกอบาร์*/
7.    ::-webkit-scrollbar-thumb {
8.        background-color: #______; /*สีตัวเลื่อน*/
9.        -webkit-border-radius: 1ex.;} /*ความโค้ง(ขนาดแนะนำ)*/
10. </style>