일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- rn webview page loading
- React Native navigation
- reactnative 웹뷰 페이지 로딩
- RN navitate push
- input 숫자입력
- react이론
- 타입스크립트
- SafeArea 커스텀
- safari wiondow.open
- React-Native 공부
- 리액트
- styled component 작동 안될때
- styled component is not working
- js 특정 위치로 이동
- 퍼블리셔
- styled component 작동안함
- styled component
- gsap
- React-Native IOS
- react native safeArea
- scrollIntoView scrollTo
- JS
- react
- slick slider 간격
- 트윈맥스 기초
- 웹뷰 페이지 로딩
- 프론트앤드
- gsap 기초
- React Native SafeArea Custom
- 임고미
Archives
- Today
- Total
개발공부 임고미
[JavaScript] 타겟 위치로 이동시키기 본문
728x90
300x250
특정 element위치로 이동시킬경우 element의 위치를 구해서 scrollTo를 사용해주고 있었다.
그러나 더 쉬운 방법을 찾아 공유해보고자 한다..
키워드는
scrollIntoView
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.btn-box {
position: sticky;
top: 0;
}
.box div {
width: 400px;
height: 400px;
}
.box div:nth-child(1) {
background: red;
}
.box div:nth-child(2) {
background: blue;
}
.box div:nth-child(3) {
background: pink;
}
.box div:nth-child(4) {
background: violet;
}
</style>
</head>
<body>
<div class="btn-box">
<button class="itembtn">1</button>
<button class="itembtn">2</button>
<button class="itembtn">3</button>
<button class="itembtn">4</button>
</div>
<div class="box">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
</div>
<script>
document.querySelectorAll(".itembtn").forEach((btn, index) => {
btn.addEventListener("click", function () {
document
.querySelector(`.box div:nth-child(${index + 1})`)
.scrollIntoView({ behavior: "smooth" });
});
});
</script>
</body>
</html>
해당 엘리먼드 위치로 바로 이동한다,.. 위의 테스트 코드는
버튼을 클릭하면 해당 아이템 시작점으로 스크롤해준다.
그런데 만약,, 맨위에 찰삭 붙게하고 싶은게 아니라 위에 여백을 남기고 싶은 경우에는 어떻게 해야할까 ?
이 경우에는 scrollIntoView 만으로는 해결할 수가 없다.
1. scrollIntoView 를 이용하는 방법
target.scrollIntoView();
window.scrollBy(0, -margin);
2단계로 해당 기능을 구현할 수 있다.
맨 위로 찰삭 붙게 한 다음, 원하는 만큼의 간격을 주는 방법
2. window.scroll이용하기
window.scroll({
top: (target.offsetTop ?? 0) - (margin ?? 0),
});
타겟의 위치 - 원하는만큼의 간격
으로 한번에 이동하는 방법
참고 : 링크
728x90
300x250
Comments