scrollIntoView는 모든 브라우저에서 작동합니까?
scrollIntoView()모든 브라우저에서 작동 합니까 ? 그렇지 않다면 jQuery대안이 있습니까?
예, 지원되지만 사용자 경험은 ... 나쁩니다.
@ 9bits가 지적했듯이 이것은 모든 주요 브라우저에서 오랫동안 지원되었습니다 . 그것에 대해 걱정하지 마십시오. 주요 문제는 작동 방식입니다. 페이지 끝에있을 수있는 특정 요소로 이동합니다. 여기로 이동하면 사용자는 다음 사항을 알 수 없습니다.
- 페이지가 위로 스크롤되었습니다
- 페이지가 아래로 스크롤되었습니다
- 그들은 다른 곳으로 리디렉션되었습니다
처음 두 개는 스크롤 위치로 결정할 수 있지만 점프가 완료되기 전에 사용자가 스크롤 위치를 추적했다고 누가 말했습니까? 그래서 그것은 비 결정적 행동입니다.
마지막 한 페이지가있다 특히 해당 할 수 있습니다 이동 보기 밖으로 스크롤됩니다 헤더 및 페이지 디자인을 남아 그것은 또한 왼쪽 메뉴 같은 어떤 전체 높이의 수직 요소가없는 경우 (같은 페이지에있는 아무 것도 의미하지 않는다 바). 얼마나 많은 페이지에이 문제가 있는지 놀랄 것입니다. 직접 확인해보세요. 일부 페이지로 이동하여 상단을 본 다음 End키 를 누르고 다시보십시오. 다른 페이지라고 생각할 가능성이 높습니다.
scrollintoview구조에 애니메이션 jQuery 플러그인
그렇기 때문에 네이티브 DOM 기능을 사용하는 대신 스크롤을 수행 하는 플러그인 이 여전히 있습니다 . 일반적으로 위에서 설명한 세 가지 문제를 모두 제거하는 애니메이션 스크롤링입니다. 사용자는 움직임을 쉽게 추적 할 수 있습니다.
다음과 같이 보입니다 : http://www.quirksmode.org/dom/w3c_cssom.html
Matteo Spinnelli의 iScroll-4를 사용 하며 iOS 사파리에서도 작동합니다. scrollTo, scrollToElement 및 scrollToPage의 세 가지 메소드가 있습니다. div 내부에 정렬되지 않은 요소 목록이 있다고 가정 해 보겠습니다. Robert Koritnik이 위에서 작성했듯이 스크롤했음을 보여주는 약간의 애니메이션이 필요합니다. 아래 방법은 그 효과를 얻습니다.
scrollToElement(element, time);
이것을 시도하지 않았지만, 내장 된 scrollIntoView 함수에 편승하면 많은 코드를 절약 할 수있는 것 같습니다. 애니메이션 액션을 원하는 경우 다음을 수행합니다.
- 컨테이너의 현재 스크롤 위치를 START POSITION으로 캐시합니다.
- scrollIntoView 내장 실행
- 스크롤 위치를 END POSITION으로 다시 캐시합니다.
- 컨테이너를 START POSITION으로 되돌립니다.
- END POSITION까지 스크롤 애니메이션
scrollIntoViewIfNeeded에 대해 읽어주세요
if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
jQuery 대안을 사용 <html>하고 애니메이션 및 <body>요소를 사용할 수 있습니다 .
$('html, body').animate({
scrollTop: $("#myElem").offset().top
}, 1000);
참고 URL : https://stackoverflow.com/questions/9445842/does-scrollintoview-work-in-all-browsers
'Programing' 카테고리의 다른 글
| HTML 선택 상자의 높이 (드롭 다운) (0) | 2020.09.25 |
|---|---|
| 시작하기 : Node.js 용 데이터베이스 설정 (0) | 2020.09.25 |
| Swift 4 디코딩 가능한 프로토콜에서 JSON 사전 유형으로 속성을 디코딩하는 방법 (0) | 2020.09.25 |
| 사용자의 브라우저가 표시 할 수있는 모든 글꼴 나열 (0) | 2020.09.25 |
| npm : "0.1"버전이 잘못된 이유는 무엇입니까? (0) | 2020.09.25 |