기본 콘텐츠로 건너뛰기

drag해서 가로로 스크롤 이동하기 - javascript

이미지
작성자:

drag해서 가로로 스크롤 이동

.vue

<template>
  ...
  <div class="pd_img" @pointerenter="pEnter" @pointerdown="pDown" 
            @pointerleave="pLeave" @pointerup="pUp" @pointermove="pMove" 
            @click="pClick" @scroll="pScroll"><!-- @wheel="pWheel" -->
    <img src="가로로 긴~ 이미지.jpg" alt="">
  </div>
  ...
</template>

<script setup>
import { ref } from "vue"

//
const info = ref({
  is_down: false,// 스크롤/드래그 시작 여부
  start_x: null,
  scroll_left: null,
  imgdiv: null,//  이미지
  imgtxtno: 0,// 이미지의 특정 위치를 지날 때 보여지는 텍스트 번호
})

//
const pEnter = () => {
  if(info.value.imgdiv === null) {
    info.value.imgdiv = document.querySelector(".pd_img");
  }
}
const pDown = (e) => {
  // console.log("mDown", e);
  info.value.is_down = true;
  info.value.start_x = e.pageX - info.value.imgdiv.offsetLeft;
  info.value.scroll_left = info.value.imgdiv.scrollLeft;
}
const pLeave = (e) => {
  // console.log("mLeave", e);
  info.value.is_down = false;
}
const pUp = (e) => {
  // console.log("mUp", e, info.value.imgdiv.scrollLeft);
  info.value.is_down = false;
}
const pMove = (e) => {
  // console.log("mMove", e);
  if(!info.value.is_down) return;
  e.preventDefault();
  let x = e.pageX - info.value.imgdiv.offsetLeft;
  let mov = x - info.value.start_x;
  info.value.imgdiv.scrollLeft = info.value.scroll_left - mov;
  moveShow(info.value.imgdiv.scrollLeft);
}
const pClick = (e) => {
  // console.log("click", e);
  info.value.is_down = false;
}
const pScroll = (e) => {
  // console.log(e.target.scrollLeft);
  moveShow(e.target.scrollLeft);
}
// @wheel="pWheel"
// const pWheel = (e) => {
// console.log(e, e.wheelDelta, e.wheelDeltaX, e.wheelDeltaY);
// if(e.wheelDeltaY < 0) {
//   info.value.imgdiv.scrollLeft = info.value.imgdiv.scrollLeft + 50;
// } else {
//   info.value.imgdiv.scrollLeft = info.value.imgdiv.scrollLeft - 50;
// }
// }
const moveShow = (n) => {
  // 720은 기본 가로 사이즈, 모바일에선 해당 폰의 가로 사이즈
  let winwidth = window.innerWidth > 720 ? 720 : window.innerWidth;
  if(n < (1200 / 720 * winwidth)) {
    info.value.imgtxtno = 0;
  } else if(n >= (1200 / 720 * winwidth) && n < (2200 / 720 * winwidth)) {
    info.value.imgtxtno = 1;
  } else if(n >= (2200 / 720 * winwidth) && n < (3700 / 720 * winwidth)) {
    info.value.imgtxtno = 2;
  } else if(n >= (3700 / 720 * winwidth)) {
    info.value.imgtxtno = 3;
  }
}
</script>

sample css

.pd_img {
  display: flex;
  width: 72rem;
  height: 61rem;
  touch-action: auto;
  overflow-y: hidden;
  overflow-x: scroll;
  &::-webkit-scrollbar {
    height: 0.8rem;
  }
  img {
    width: 510.6rem;
    height: 131rem;
    pointer-events: none;
  }
}

drag해서 가로로 스크롤 이동할 때 유용한 스크립트. 모바일에서도 터치 드래그가 되려면 touch-action 을 설정해야 한다.


끝.



분류 :