CSS를 통한 마우스 휠의 수평 스크롤 효과를 달성하는 방법은 무엇입니까?

CSS 팁 : 마우스 휠의 수평 스크롤을 쉽게 알 수 있습니다.

웹 디자인에서는 수평 스크롤을 달성하기 위해 마우스 휠이 종종 필요합니다. 특히 수평으로 배열 된 많은 내용이있는 시나리오에서는 종종 마우스 휠이 필요합니다. 기본적으로 스크롤 휠은 일반적으로 초상화 스크롤링을 제어하므로 편리하지 않은 Shift 키를 수평으로 스크롤하려면 Shift 키를 유지해야합니다. JavaScript는 스크롤 휠 이벤트를 듣고 수평 스크롤 바를 제어 할 수 있지만이 방법으로 인해 스크롤이 충분히 부드럽 지 않을 수 있습니다.

이 기사는보다 우아한 솔루션을 소개합니다. CSS 스타일을 사용하여 수평 스크롤을 달성하고 JavaScript없이 스크롤은 더 매끄럽고 자연 스럽습니다.

다음과 같은 이전 자바 스크립트 방법 :

 기능 onscroll (이벤트) {
  왼쪽 = -event.wheeldelta || event.deltay / 2;
  templatelistref.value.scrollleft = templatelistref.value.scrollleft 왼쪽;
}

성과 문제와 경험이 좋지 않습니다.

CSS 솔루션의 핵심은 회전입니다.

1. 컨테이너 회전 : 컨테이너 요소를 회전시키고 -90도 transform: rotate(-90deg);
2. 자식 요소 회전 : 컨테이너의 어린이 요소를 90도 회전하고 transform: rotate(90deg);

컨테이너와 자식 요소를 회전시켜 마우스의 수직 스크롤은 시각적 수평 스크롤로 영리하게 변환됩니다. 이 방법은 간단하고 직접적이며 JavaScript가 가져온 성능 오버 헤드를 피하고 더 나은 사용자 경험이 있습니다. 스크롤 휠 이벤트를 모니터링 할 필요가 없으며 스크롤은 더 자연스럽고 매끄 럽습니다.

위 내용은 CSS를 통한 마우스 휠의 수평 스크롤 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!