CSS와 JavaScript를 사용하여 웹사이트 스크롤 속도를 어떻게 제어할 수 있나요?

스크롤 속도 저하: CSS vs. JavaScript

문제 설명

웹 개발에서는 웹사이트 콘텐츠의 스크롤 속도를 제어하는 ​​것이 바람직합니다. 특히 마우스 휠을 사용할 때. 그러나 CSS만으로는 이 목적에 충분하지 않을 수 있습니다.

CSS 제한 사항

CSS는 오버플로와 같은 특정 스크롤 관련 속성을 구현하는 데 사용할 수 있지만 다음 기능을 직접 제공하지는 않습니다. 스크롤 속도를 수정합니다. 스크롤 속도는 운영 체제, 브라우저 설정, 사용자 기본 설정 등 다양한 요소에 따라 달라지기 때문입니다.

JavaScript 솔루션

이 문제를 해결하기 위해 JavaScript 또는 jQuery와 같은 JavaScript 라이브러리를 사용할 수 있습니다. 개발자는 브라우저의 스크롤 이벤트를 조작하여 스크롤 속도를 변경하고, 스크롤 동작을 조정하고, 스크롤 방향을 반대로 바꿀 수도 있습니다.

실용적 구현

이러한 구현 중 하나는 Toni Almeida의 JavaScript/jQuery 데모입니다. . 분석 내용은 다음과 같습니다.

HTML:

<div>
<p><strong>JavaScript/jQuery:</strong></p>
<pre class="brush:php;toolbar:false">function wheel(event) {
  var delta = 0;
  if (event.wheelDelta) {
    delta = event.wheelDelta / 120;
  } else if (event.detail) {
    delta = -event.detail / 3;
  }

  handle(delta);
  if (event.preventDefault) {
    event.preventDefault();
  }
  event.returnValue = false;
}

function handle(delta) {
  var time = 1000;
  var distance = 300;

  $('html, body').stop().animate({
    scrollTop: $(window).scrollTop() - (distance * delta)
  }, time);
}

if (window.addEventListener) {
  window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;

이 코드는 효과적으로 스크롤 위치를 더 느린 속도로 애니메이션하여 스크롤 속도를 높입니다. 사용자가 스크롤하면 스크롤 속도가 느려지고 결국 중지되어 콘텐츠의 스크롤 동작을 원하는 대로 제어할 수 있습니다.