Vue 가로 스크롤

Question

마우스 아이콘을 사용하여 가로로 스크롤하고 싶습니다. 값이 100에서 -100 사이에서 변경되는 Javascript에서 를 사용하고 있습니다. scrollLeft尝试过，但滚动时该值不会改变。滚动时，只有 deltaY

어디 문제인지 아시는 분 계신가요?

스크롤 막대 위에 마우스를 놓고 스크롤하면 작동하지만 전체 div 컨테이너에서 작동하길 원합니다. 또한 가능하다면 종속성/npm-libraries 없이 이 작업을 수행하고 싶습니다.

템플릿

으아악

자바스크립트

으아악

사아스

으아악

아래로 스크롤할 때 콘솔 출력

으아악

이게 바로 이런 모습

Answer 1

귀하의 예에서 문제는 event.target이 스크롤바 요소가 아니라 아이콘이라는 것입니다.

ref를 사용하여 올바른 요소를 타겟팅하는지 확인하세요. ¹

---

또 다른 옵션은 요소의 scrollLeft HTML 속성에 바인딩하고 Vue가 DOM 업데이트를 처리하도록 하는 것입니다. 컨트롤러에서 값을 변경하면 됩니다.

우리는 .camel 修饰符来绕过 HTML 属性（我们用来绑定到属性的属性）不区分大小写的事实 :scroll-left.camel ^{2, 3}

을 사용합니다.

으아아아 으아아아 으아아아

참고:

---

¹ - scrollLeft 属性，所以我们不需要 ref 不再。我保留它是因为我想将控制器 scrollLeft 值限制在有效值内，并且需要 ref 속성에 바인딩하고 있으므로 더 이상 ref가 필요하지 않습니다. 컨트롤러
값을 유효한 값으로 제한하고 싶고 최대값을 계산하는 데 필요했기 때문에 이를 유지했습니다. 2:scroll-left.camel.prop，因为它是一个 HTML 属性，但是它也可以在没有 .prop
- 기술적으로는 수정자 없이도 작동해야 합니다. 3.scroll-left.camel 也适用（:scroll-left.camel 的简写.prop

- 🎜). 🎜

Answer 2

저는 귀하와 유사한 접근 방식을 시도했지만 귀하의 ScrollIcons 메서드에서 event.target.scrollLeft += event.deltaY 中使用 currentTarget 而不是 target 时才起作用 해보기 전까지는 그렇지 않았습니다. 이렇게 하면 커서가 아이콘 위에 있는 동안 마우스 휠을 사용할 때 아이콘 대신 포함된 div 또는 레이블을 대상으로 지정하게 됩니다. 즉, 커서가 포함된 div와 마우스 휠 내에 있는 한 div는 div와 마우스 커서 사이의 다른 요소에 관계없이 반응해야 합니다.