แถบเลื่อนและประสบการณ์ผู้ใช้
ขณะนี้ผู้ใช้คุ้นเคยกับประสบการณ์บางอย่างเมื่อนำทางไปยังเว็บไซต์ ตัวอย่างเช่น คุณคาดหวังให้โลโก้ของธุรกิจที่มุมบนซ้ายของไซต์นำคุณไปยังหน้าแรก แต่ถ้าไม่มีล่ะ? จะเกิดอะไรขึ้นถ้าทุกอย่างในไซต์นั้นตรงกันข้าม สิ่งที่คุณคิดว่ามันจะทำ?
ลองนึกภาพว่ามีแถบเลื่อนอยู่หรือไม่ แต่เมื่อคุณเลื่อนปุ่มเลื่อนบนเมาส์หรือคุณลากนิ้วไปบนแทร็กแพดของอุปกรณ์ ไม่มีอะไรเกิดขึ้น . นั่นถือเป็นประสบการณ์ผู้ใช้ที่น่ากลัว .
สิ่งที่ทำให้หรือทำลายประสบการณ์ผู้ใช้ที่ดีอาจเป็นการโพสต์ด้วยตัวเอง แต่ส่วนหนึ่งของมันคือแถบเลื่อนที่ทำงานได้อย่างถูกต้องและความสามารถในการซ่อนไว้เพื่อความสวยงาม
แถบเลื่อนเป็นตัวบ่งชี้ที่ดีมากว่าเราคาดหวังอะไรได้บ้างบนหน้าเว็บ หากเราเห็นแถบเลื่อน แสดงว่าเราจำเป็นต้องเลื่อนลงเพื่อดูเนื้อหา เมื่อเราไม่เห็นแถบเลื่อน มักเกิดจากหนึ่งในสองสาเหตุ:
- สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ – ความสูงและความกว้างของวิวพอร์ต (หน้าจอของคุณ) ตรงกับความสูงและความกว้างของไซต์
- การออกแบบของไซต์ได้รวมเอาลูกศรแบบเคลื่อนไหวหรือคุณลักษณะบางอย่างที่ระบุว่ามีเนื้อหาเพิ่มเติมผ่านการเลื่อน เฉพาะเมื่อเราเริ่มเลื่อนแถบเลื่อนจะปรากฏขึ้น ค่าเริ่มต้นคือซ่อนไว้จนกว่าจะถึงเวลานั้น
ในฐานะนักพัฒนา การใช้แถบเลื่อนที่เหมาะสมจะช่วยปรับปรุงประสบการณ์ผู้ใช้ของไซต์ ซึ่งจะทำให้ลูกค้าอยู่ในไซต์
หมายเหตุด้านข้าง: อย่าลืมใช้แถบเลื่อนแนวนอนเมื่อคุณ จงใจ ต้องการใช้พวกเขา หากปรากฏบนไซต์ของคุณโดยไม่ได้ตั้งใจ มักเป็นเพราะบางอย่างผิดปกติกับขนาดของส่วนประกอบของคุณ อย่าซ่อนแถบเลื่อนแนวนอนโดยตั้งใจเมื่อไม่ควรอยู่ตรงนั้น
การใช้งาน CSS
สิ่งแรกที่ควรทราบเกี่ยวกับการใช้งานนี้คือเบราว์เซอร์หลักบางตัวไม่ได้ถูกสร้างขึ้นมาเท่ากัน สิ่งที่ใช้ได้กับ Firefox จะใช้ไม่ได้กับ Chrome หรือ Internet Explorer และในทางกลับกัน CSS ใช้สิ่งที่เราเรียกว่า คำนำหน้าผู้ขาย หรือ คำนำหน้าเบราว์เซอร์ เพื่อช่วยเราให้การสนับสนุนข้ามเบราว์เซอร์ เราแสดงรายการไว้ด้านล่าง:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
แผ่นโกงคำนำหน้าผู้ขาย
| คำนำหน้าผู้ขาย | ครอบคลุมเบราว์เซอร์ |
| -webkit- | Chrome, Safari, Opera เวอร์ชันใหม่ และเบราว์เซอร์ iOS ส่วนใหญ่ รวมถึง Firefox สำหรับ iOS |
| -moz- | Firefox (ไม่ใช่ iOS) |
| -o- | Opera เวอร์ชันเก่า |
| -ms- | Internet Explorer และ MS Edge |
URL: เครดิต:MDN – คำนำหน้า CSS
ข้อความแสดงแทน:Mozilla Developer Network ได้สร้างเอกสารสูตรที่มีประโยชน์สำหรับการจำคำนำหน้าที่จะใช้
คำบรรยาย: MDN ได้สร้างสูตรโกงที่มีประโยชน์สำหรับการจดจำคำนำหน้าที่จะใช้สำหรับเบราว์เซอร์ใด
คำถามก็กลายเป็นว่า เราจะรู้ได้อย่างไรว่าเมื่อใดที่เราต้องการคำนำหน้า และเมื่อเราไม่ต้องการคำนำหน้าเมื่อใด ผู้ที่สร้าง CSS มักจะทดลองกับคุณสมบัติใหม่และวิธีการทำสิ่งต่างๆ ใหม่ๆ อยู่เสมอ หากมีคุณสมบัติที่ค่อนข้างใหม่ อาจเป็นไปได้ว่าคุณสมบัติดังกล่าวยังไม่สามารถทำงานร่วมกันได้กับทุกเบราว์เซอร์
โชคดีที่มีเครื่องมือที่จะตรวจสอบ CSS ของคุณและเพิ่มคำนำหน้าที่คุณต้องการ คุณยังสามารถดำเนินการด้วยตนเองและใช้ไซต์ เช่น caniuse หรือเอกสาร MDN เพื่อช่วยคุณระบุความเข้ากันได้ของเบราว์เซอร์
มาโค้ดกันเถอะ!
<!DOCTYPE html>
<html>
<head>
<title>CSS: Hide the Scrollbar</title>
<style>
* {
box-sizing: border-box;
scrollbar-width: none; /* Firefox implementation */
}
body {
max-height: 500px;
}
h1 {
text-align: center;
}
.container, .sample-text {
max-height: 500px;
height: 500px;
}
.container {
width: 450px;
border: 2px solid #666666;
background: lightgrey;
overflow: scroll;
min-height: 520px;
margin: 0 auto;
}
.inner-container {
position: absolute;
left: 10;
overflow-x: hidden;
overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
display: none; /* webkit browsers implementation */
}
.sample-text {
width: 425px;
height: 475px;
margin: 0px 0px 10px 10px;
}
</style>
</head>
<!-- /* Sample Text From https://doctoripsum.com */ -->
<body>
<h1>CSS Hide Scrollbar</h1>
<div class="container">
<div class="inner-container">
<div class="sample-text">
<p>It is! It's the city of New New York! Strictly speaking,
it's the fifteenth New York since the original, so that
makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York. River, you know my name. You whispered my name in
my ear! There's only one reason I would ever tell anyone my
name. There's only one time I could... New-new-Doctor. Don't
you think she looks tired? I'll tell you what, then:
don't...step on any butterflies. What have butterflies ever
done to you? Oh, yes. Harmless is just the word: that's why
I like it! Doesn't kill, doesn't wound, doesn't maim. But
I'll tell you what it does do: it is very good at opening
doors!</p>
<p>Aw, I wanted to be ginger! I've never been ginger!
And you, Rose Tyler! Fat lot of good you were! You gave up
on me! Ooh, that's rude. Is that the sort of man I am now?
Am I rude? Rude and not ginger. Sweet, maybe... Passionate,
I suppose... But don't ever mistake that for nice. Please,
when Torchwood comes to write my complete history, don't
tell people I travelled through time and space with her
mother! New-new-Doctor. Don't you think she looks tired? I'm
the Doctor, I can save the world with a kettle and some
string! And look! I'm wearing a vegetable! New-new-Doctor.
I'm sorry. I'm so sorry. It is! It's the city of New New
York! Strictly speaking, it's the fifteenth New York since
the original, so that makes it
New-New-New-New-New-New-New-New-New-New-New-New-New-New-New
New York.</p>
</div>
</div>
</div>
</body>
</html>
เมื่อเราเรียกใช้โค้ดนี้ใน Chrome ควรสร้างพื้นหลัง div สีเทาและข้อความบางส่วนที่คุณสามารถเลื่อนดูได้ รวมการใช้งานที่พบบ่อยที่สุดสองรายการ – Firefox อยู่ด้านบนสุดของโค้ดใน <style> แท็ก อย่างอื่นส่วนใหญ่อยู่ในคุณสมบัตินำหน้า –webkit
สิ่งที่คุณจะสังเกตเห็นในการใช้งานของคุณคือไม่มีแถบเลื่อน แต่ยังคงมีฟังก์ชันของแถบเลื่อน นี่เป็นวิธีหนึ่งในการซ่อนแถบเลื่อนของคุณใน CSS มีอะไรอีกบ้างที่ทำงานให้คุณ? ฉันขอท้าให้คุณลองเล่นกับรหัสของคุณเพื่อดูว่าคุณสามารถหาวิธีอื่นได้หรือไม่
