[TIL]221228

EllaDev·2022년 12월 28일

Today I Learn

목록 보기

6/13

이슈

해시태그

문제 : dynamic ref를 설정해서 getBoundingClientRect() 값을 가져오지 못한다.
원인 : Element tag가 아니라 Component를 loop 돌리기 때문이다.

해결 :

//@/components/base/create-hashtag/TagInput.vue
<template>
...
	<HashtagMenu
	  v-for="(item, index) in filterTags"
	  :ref="el=> {menuItemRef[index]= el}"
	  :key="index"
	  :index="index"
	  :item="item"
	  :active-index="choiceTagsIndex"
	  @click="clickOnMenu(item)"
	/>
...
</template>
<script>
export default defineComponent({
	setup(props, { emit }) {
		const menuItemRef = ref<typeof HashtagMenu[]>([])
		const handleOnChoiceTag = () =>{
			//변경 전
			 const scrollPosition = menuItemRef.value[choiceTagsIndex.value].getBoundingClientRect()
			//변경 후
		   const scrollPosition = menuItemRef.value[choiceTagsIndex.value].$el.getBoundingClientRect()
    }
	}
})
</script>

문제2: 해당 아이템이 window scroll 기준 포지션을 나타낸다. 내부 컨테이너 안의 아이템을 ScrollTop을 시켜주는 방법은?

해결:

방법) scrollIntoView() 사용

[element.scrollIntoView - Web API | MDN](https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView)

export default defineComponent({
	setup(props, { emit }) {
		const menuItemRef = ref<typeof HashtagMenu[]>([])
		const handleOnChoiceTag = () =>{
			 menuItemRef.value[choiceTagsIndex.value].scrollIntoView()
    }
	}
})

문제 3: 해당 아이템을 하나 내릴때마다 내부 스크롤이 아이템 하나씩 내려간다.

해결 방안 : 해당 아이템이 화면에 나타나지 않은 것을 감지해서 그때 ScrollTop으로 내려갈 수 있도록 한다.

아래 함수를 이용해서 해당 아이템이 현재 화면에 있는지 체크 할 수 있다.

export const detectElementInViewport = (el: Element, scrollContainer: HTMLElement | null) => {
  const rect = el.getBoundingClientRect()
  const scrollRect = scrollContainer?.getBoundingClientRect()
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= scrollContainer!.clientHeight + scrollRect!.top &&
    rect.right <= scrollContainer!.clientWidth + scrollRect!.right
  )
}