#100DaysOfCode 중 Day27

반응형

안녕 여러분

오늘 나는 자바스크립트30 27번째 영상을 완성했어!

프로젝트 27: 스크롤하려면 클릭하여 끌기

출처: https://javascript30.com

 

학습:

그래서 오늘은 깔끔한 가로 스크롤 클릭과 드래그 아코디언 또는 회전목마를 만드는 과제를 수행했습니다.

이를 위해 마우스다운, 마우스리브, 마우스업 및 마우스무브와 같은 다양한 이벤트 수신기가 사용됩니다. 마우스가 아래로 이동했는지 위로 이동했는지 추적하는 부울을 유지하고 Element.scrollLeft 속성을 사용자가 요소를 끈 픽셀 수로 설정했습니다.

이제 몇 가지 변수를 설정해 보겠습니다.

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

 

다음으로, 우리는 기능이 있는 이벤트 수신기를 추가했다. 머스타운은 슬라이더를 활성화했다.

slider.addEventListener('mousedown', (e) => {
      isDown = true;
      slider.classList.add('active');
      startX = e.pageX - slider.offsetLeft;
      scrollLeft = slider.scrollLeft;
});

마우스리브

slider.addEventListener('mouseleave', () => {
      isDown = false;
      slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
      isDown = false;
      slider.classList.remove('active');
});

그리고 마우스 이동을 하면 슬라이더가 왼쪽으로 스크롤됩니다.

 

slider.addEventListener('mousemove', (e) => {
      if (!isDown) return;  // stop the fn from running
      e.preventDefault();
      const x = e.pageX - slider.offsetLeft;
      const walk = (x - startX) * 3;
      slider.scrollLeft = scrollLeft - walk;
});

회전목마를 스크롤, 클릭, 끌기 위해 마우스를 수평으로 움직여서 프로그램이 좋은 효과를 냈습니다.

오늘 배웠어요 (T-I-L):

• Element.scrollLeft 특성,
• 위쪽과 같은 마우스 이벤트 추적

 

읽어줘서 고마워, 내일 보자!