스크롤바 및 사용자 경험
사용자는 이제 웹사이트를 탐색할 때 특정 경험에 익숙해졌습니다. 예를 들어, 사이트의 왼쪽 상단 모서리에 있는 비즈니스 로고가 홈페이지로 연결될 것이라고 예상할 수 있습니다. 하지만 그렇지 않다면 어떻게 될까요? 해당 사이트의 모든 것이 반대한 경우 무엇을 할 것이라고 생각했습니까?
스크롤바가 존재했지만 마우스의 스크롤 버튼을 움직이거나 기기의 트랙패드에서 손가락을 끌 때 아무 일도 일어나지 않았다고 상상해 보세요. . 끔찍한 사용자 경험으로 간주됩니다. .
좋은 사용자 경험을 만들거나 깨뜨리는 것은 게시물 자체가 될 수 있지만 그 중 일부는 가장 확실히 제대로 작동하는 스크롤바와 미학을 위해 스크롤바를 숨길 수 있는 기능입니다.
스크롤바는 우리가 웹페이지에서 무엇을 볼 수 있는지에 대한 아주 좋은 지표입니다. 스크롤바가 보이면 콘텐츠를 보려면 아래로 스크롤해야 합니다. 스크롤바가 표시되지 않는 경우 일반적으로 다음 두 가지 이유 중 하나입니다.
- 보이는 대로 표시됩니다. 뷰포트(화면)의 높이와 너비는 사이트의 높이와 너비와 일치합니다.
- 사이트 디자인에는 스크롤을 통해 사용할 수 있는 콘텐츠가 더 있음을 나타내는 애니메이션 화살표 또는 기능이 포함되어 있습니다. 스크롤을 시작할 때만 스크롤 막대가 나타납니다. 그때까지 숨겨져 있는 것이 기본값입니다.
개발자로서 적절한 스크롤바 사용을 구현하면 사이트의 사용자 경험이 향상되어 클라이언트가 사이트에 계속 머물게 됩니다.
참고 사항: 의도적으로 그들을 사용하고 싶습니다. 사이트에 의도하지 않게 표시되는 경우 일반적으로 구성 요소의 크기 조정에 문제가 있기 때문입니다. 가로 스크롤바가 없어야 할 때 일부러 숨기지 마세요.
CSS 구현
이 구현에 대해 가장 먼저 주목해야 할 점은 모든 주요 브라우저가 동일하게 생성되는 것은 아니라는 것입니다. Firefox에서 작동하는 것이 Chrome이나 Internet Explorer에서는 작동하지 않으며 그 반대의 경우도 마찬가지입니다. CSS는 우리가 공급업체 접두사라고 부르는 것을 사용합니다. 또는 브라우저 접두사 브라우저 간 지원을 제공하는 데 도움이 됩니다. 아래에 나열되어 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
공급업체 접두어 치트 시트
| 공급업체 접두사 | 대상 브라우저 |
| -웹킷- | Chrome, Safari, 새 버전의 Opera 및 iOS용 Firefox를 포함한 대부분의 iOS 브라우저 |
| -moz- | Firefox(iOS 아님) |
| -o- | 오페라의 이전 버전 |
| -ms- | Internet Explorer 및 MS Edge |
URL: 크레딧:MDN – CSS 접두사
대체 텍스트:Mozilla 개발자 네트워크는 사용할 접두어를 기억하기 위한 편리한 치트 시트를 만들었습니다.
캡션: 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에서 스크롤바를 숨기는 여러 가지 방법 중 하나입니다. 당신을 위해 일한 다른 것은 무엇입니까? 다른 방법을 찾을 수 있는지 확인하기 위해 코드를 가지고 플레이해 보세요.