Javascript 스크롤 시 클래스 제거 추가

| | | | | | | | | | | | | | | | | |

스크롤 바와 사용자 경험

사용자는 이제 웹사이트를 탐색할 때 일부 경험에 익숙해졌습니다. 예를 들어 사이트의 왼쪽 상단 모서리에 있는 회사 로고를 보면 홈페이지로 이동할 수 있습니다. 하지만 작동하지 않는다면? 이 사이트의 모든 것이 생각한 것과 반대하면 어떻게 될까요?

스크롤 막대가 있지만 마우스나 슬라이드에서 스크롤 버튼을 움직일 때를 상상해 보세요. 기기의 터치패드에 손가락을 올려도 아무 일도 일어나지 않습니다. 그것은 끔찍한 사용자 경험으로 간주될 것입니다.

무엇 - 좋은 사용자 경험을 만들거나 망치는 것은 그 자체로 일이 될 수 있지만 그것의 일부는 작동합니다. 매우 확실히 용량과 바는 미학적 이유로 숨기기 위해 스크롤됩니다.

스크롤 바는 웹 페이지에서 볼 수 있는 것을 보여주는 훌륭한 지표입니다. 스크롤 막대가 보이면 콘텐츠를 보려면 아래로 스크롤해야 할 것으로 예상됩니다. 스크롤 막대가 표시되지 않는 것은 일반적으로 다음 두 가지 이유 중 하나 때문입니다.

  1. 보이는 대로 표시됩니다. 보이는 영역(화면)의 높이와 너비는 다음과 같습니다. 사이트의 높이와 너비.
  2. 사이트 디자인에는 스크롤을 통해 더 많은 콘텐츠를 사용할 수 있음을 보여주는 일종의 화살표 또는 애니메이션 기능이 포함됩니다. 스크롤을 시작할 때만 스크롤 막대가 나타납니다. 기본값은 그때까지 숨겨져 있는 것입니다.
  3. 개발자로서 스크롤 막대를 올바르게 사용하면 사이트의 사용자 경험이 향상되어 고객이 사이트에 계속 머물 수 있습니다.

메모 측면: 가로 스크롤 막대를 의도적으로 사용하려는 경우 반드시 사용해야 합니다. 사이트에 의도하지 않게 표시되는 경우 일반적으로 구성 요소 크기 조정에 문제가 있기 때문입니다. 가로 스크롤 막대를 숨기지 마십시오. 존재하지 않아야 할 때의 목표입니다.

CSS 구현

이 구현에 대해 주목해야 할 첫 번째 사항은 모든 주요 브라우저가 동일하게 생성된다는 것입니다. Firefox에서 작동하는 것은 Chrome에서 작동하지 않습니다. 또는 Internet Explorer 또는 그 반대의 경우도 마찬가지입니다. CSS는 우리가 제공자 접두사 또는 브라우저 접두사 라고 하는 것을 사용하여 여러 브라우저에 대한 지원을 제공하는 데 도움이 됩니다. 아래에 제시합니다.

< br>

Cheat Sheet 공급업체 접두사

공급업체 접두사 브라우저 커버
-webkit- Chrome , Safari, 최신 버전의 Opera 및 iOS용 Firefox를 포함한 대부분의 iOS 브라우저
-moz - Firefox (비 iOS)
-o- 이전 버전의 Opera
-ms- Internet Explorer 및 MS Edge

URL: 크레딧: MDN - CSS 접두사

대체 텍스트: Mozilla 개발자 네트워크는 어떤 접두사를 기억해야 하는지 기억하기 위해 편리한 치트 시트를 만들었습니다. use

캡션: MDN은 브라우저에 사용할 접두어를 기억하기 위해 편리한 치트 시트를 만들었습니다.

그런 다음 질문은, 어떻게 접두사가 필요할 때와 그렇지 않을 때를 알고 있습니까? CSS 제작자는 항상 새로운 속성과 새로운 작업 방식을 실험하고 있습니다. 새로운 속성이 하나만 있어도 아직 모든 브라우저와 호환되지 않을 수 있습니다.

다행히도 CSS를 살펴보는 도구가 있습니다. 필요한 접두사를 추가하십시오. 수동으로 수행하고 caneuse 또는 문서 브라우저 호환성을 결정하는 데 도움이 되는 MDN.

Let code

Chrome에서 이 코드를 실행하면 회색 배경 div와 일부 텍스트가 생성되어야 합니다. 스크롤하십시오. 가장 일반적인 두 가지 구현이 포함되어 있습니다. Firefox는