CSS 또는 JavaScript를 사용하여 웹 페이지의 스크롤 속도를 제어할 수 있습니까?

CSS나 jQuery로 스크롤 속도를 조정할 수 있나요?

웹 브라우저의 기본 스크롤 속도는 특히 마우스 휠을 사용하여 div를 탐색할 때 너무 빠르게 느껴질 수 있습니다. 콘텐츠. 다행스럽게도 JavaScript 또는 jQuery를 사용하여 이 스크롤 속도를 수정할 수 있으므로 보다 원활한 사용자 경험을 위해 맞춤 설정할 수 있습니다.

스크롤 속도 낮추기

스크롤 속도 조정의 장점 중 하나는 배경 요소가 전경 요소와 다른 속도로 움직이는 시차와 같은 효과를 생성하는 기능.

JavaScript 구현

사용자 정의 스크롤 속도를 구현하려면 아래에 설명된 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;

이 스크립트는 jQuery를 사용하여 스크롤을 제어합니다. 델타 값을 기준으로 속도를 조정하므로 마우스 휠로 속도와 이동 거리를 조정할 수 있습니다. stop() 및 animate() 메소드는 부드러운 스크롤 효과를 제공합니다.

결론

스크롤 속도를 수정하는 것이 모든 상황에 적용 가능한 것은 아니지만 사용자 참여를 높이는 데 유용한 기술이 될 수 있습니다. 시각적으로 매력적인 효과를 만들어냅니다. JavaScript 접근 방식을 사용하면 특정 디자인 목표에 맞게 속도 및 기타 매개변수를 사용자 정의할 수 있습니다.