CSS Scrollbar Generator
ออกแบบแถบเลื่อนอย่างสังหรณ์ใจด้วยการแสดงตัวอย่างแบบเรียลไทม์
สร้างโค้ด CSS ที่เข้ากันได้กับ WebKit และ Firefox โดยอัตโนมัติ
Preview
ตัวอย่างจะปรากฏที่นี่ เลื่อนลงเพื่อดูการออกแบบ นี่คือข้อความจำลองเพื่อสร้างพื้นที่เลื่อน ปรับความกว้าง สี และความโค้งของขอบให้ตรงกับการออกแบบเว็บไซต์ของคุณ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Customization
Generated CSS Code
เกี่ยวกับเครื่องมือสร้าง CSS Scrollbar
CSS Scrollbar Generator เป็นเครื่องมือออนไลน์ฟรีที่ให้คุณปรับแต่งการออกแบบแถบเลื่อนของเว็บไซต์และสร้างโค้ด CSS ที่จำเป็นได้ทันที
เพียงใช้งานตัวเลื่อนและตัวเลือกสีเพื่อปรับแต่งสไตล์ของแถบเลื่อนและพื้นหลัง เช่น สี ความกว้าง และความโค้งมน ในขณะที่ดูตัวอย่างแบบเรียลไทม์
โค้ดที่สร้างขึ้นไม่เพียงแต่เข้ากันได้กับเบราว์เซอร์ WebKit เช่น Chrome, Safari และ Edge แต่ยังรองรับ Firefox ผ่าน scrollbar-color และ scrollbar-width การประมวลผลทั้งหมดเสร็จสิ้นในเบราว์เซอร์ของคุณ ทำให้ใช้งานได้ปลอดภัย รวดเร็ว และฟรีโดยไม่ต้องติดตั้งหรือลงทะเบียน
วิธีใช้งานเครื่องมือ
กำหนดขนาดและรูปร่าง
ใช้ตัวเลื่อนในแผงควบคุมเพื่อตั้งค่าความกว้างและความโค้งมนของแถบเลื่อน พื้นที่แสดงตัวอย่างจะสะท้อนการปรับเปลี่ยนของคุณทันที ดังนั้นให้ปรับเพื่อให้เข้ากับการออกแบบเว็บไซต์ของคุณ
ปรับแต่งสี
ใช้ตัวเลือกสีเพื่อเลือกสีของแถบเลื่อน สีของพื้นหลัง และสีเมื่อชี้เมาส์ เลือกสีที่เข้ากับธีมเว็บไซต์หรือสีเน้นของคุณ
คัดลอกและนำไปใช้
เมื่อคุณพอใจกับตัวอย่างแล้ว ตรวจสอบโค้ด CSS ที่สร้างขึ้นอัตโนมัติที่ด้านล่างของหน้าจอและคลิกปุ่ม "คัดลอก CSS" วางลงในสไตล์ชีตของเว็บไซต์เพื่อเสร็จสิ้นการนำไปใช้
อภิธานศัพท์ CSS Scrollbar
- WebKit Prefix (::-webkit-scrollbar)
- pseudo-element CSS ที่ไม่ได้มาตรฐานซึ่งใช้ในการปรับแต่งแถบเลื่อนในเบราว์เซอร์ที่ขับเคลื่อนโดยเอนจิน WebKit/Blink เช่น Chrome, Safari และ Edge ช่วยให้สามารถออกแบบปรับแต่งได้สูง
- Scrollbar Track
- พื้นหลังหรือร่องของแถบเลื่อน คุณสามารถจัดรูปแบบได้โดยใช้ ::-webkit-scrollbar-track เพื่อกำหนดสีพื้นหลังหรือเงาด้านใน
- Scrollbar Thumb
- ส่วนที่ลากได้ของแถบเลื่อนซึ่งระบุตำแหน่งการเลื่อน มีการจัดรูปแบบโดยใช้ ::-webkit-scrollbar-thumb เพื่อปรับสีและความโค้งมน
- scrollbar-color และ scrollbar-width
- คุณสมบัติ CSS มาตรฐาน W3C ที่รองรับโดยเบราว์เซอร์เช่น Firefox ซึ่งไม่รองรับ WebKit prefixes ช่วยให้คุณตั้งค่าสีของแถบเลื่อนและพื้นหลังและกำหนดความกว้าง (auto, thin หรือ none)
- Cross-browser Compatibility
- ความสามารถของเว็บไซต์ในการทำงานและแสดงผลอย่างสม่ำเสมอในเว็บเบราว์เซอร์ต่างๆ (Chrome, Firefox, Safari ฯลฯ) เครื่องมือของเราสร้างโค้ดที่ทำงานได้อย่างราบรื่นในเบราว์เซอร์หลักทั้งหมด
คำถามที่พบบ่อย (FAQ)
- Q.CSS ที่สร้างขึ้นจะทำงานบนสมาร์ทโฟนหรือไม่?
- ใช่ ทำงานได้บนเบราว์เซอร์มือถือที่ใช้ WebKit เช่น Safari บน iOS และ Chrome บน Android อย่างไรก็ตาม ขึ้นอยู่กับข้อกำหนดของ OS แถบเลื่อนอาจปรากฏขึ้นระหว่างการเลื่อนเท่านั้น
- Q.ฉันสามารถใช้แถบเลื่อนกับองค์ประกอบเฉพาะ (เช่น div) เท่านั้นได้หรือไม่?
- ได้ คุณสามารถแทนที่ .custom-scrollbar ในโค้ดที่สร้างขึ้นด้วยคลาสหรือ ID ขององค์ประกอบเฉพาะของคุณ (เช่น .my-container หรือ #scroll-box)
- Q.สามารถใช้งานร่วมกับเบราว์เซอร์ Firefox ได้หรือไม่?
- ใช่ เครื่องมือนี้ไม่เพียงแต่สร้าง pseudo-elements ของ WebKit โดยอัตโนมัติเท่านั้น แต่ยังสร้างคุณสมบัติ scrollbar-color และ scrollbar-width มาตรฐานของ W3C สำหรับ Firefox ด้วย
- Q.ข้อมูลของฉันถูกบันทึกบนเซิร์ฟเวอร์เมื่อใช้เครื่องมือนี้หรือไม่?
- ไม่ เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยใช้ JavaScript ดังนั้นการตั้งค่าและโค้ดที่สร้างขึ้นจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอก
- Q.ฉันจะซ่อนแถบเลื่อนทั้งหมดได้อย่างไร?
- หากต้องการซ่อนแถบเลื่อนในขณะที่ยังคงฟังก์ชันการเลื่อนไว้ คุณสามารถใช้ ::-webkit-scrollbar { display: none; } สำหรับ WebKit และ scrollbar-width: none; สำหรับ Firefox
กรณีการใช้งาน
การรวมสีของแบรนด์ให้เป็นหนึ่งเดียว
เปลี่ยนสีของแถบเลื่อนบนเว็บไซต์องค์กรหรือพอร์ตโฟลิโอของคุณให้เข้ากับสีของแบรนด์ เพิ่มความสม่ำเสมอในการออกแบบโดยรวม
เว็บแอปพลิเคชัน UI แบบกำหนดเอง
เหมาะสำหรับเว็บแอปพลิเคชันเช่นแอปพลิเคชันแชทหรือแดชบอร์ดที่คุณมีพื้นที่เลื่อนภายใน (divs) และต้องการซ่อนแถบเลื่อน OS มาตรฐานเพื่อให้ดูเพรียวบางยิ่งขึ้น
รองรับโหมดมืด
ปรับแถบเลื่อนของคุณเป็นสีเทาเข้มหรือเฉดสีที่คล้ายกันเพื่อให้กลมกลืนกับโหมดมืดของเว็บไซต์ของคุณ ลดแสงสะท้อนและความเครียดของสายตาสำหรับผู้ใช้
การออกแบบที่เรียบง่าย
ตั้งค่าความกว้างของแถบเลื่อนให้บางมาก ทำให้ไม่เกะกะและรักษาความสนใจของผู้ใช้ไว้ที่เนื้อหาจริงของคุณ
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง