스크롤IntoView는 모든 브라우저에서 작동합니까?
요?scrollIntoView()모든 브라우저에서 작동합니까? 않다면면이 .jQuery대안?
지원은 되지만 사용자 경험은... 나쁘죠
@9bits가 지적했듯이, 이는 오랫동안 모든 주요 브라우저에서 지원되어 왔습니다.그건 걱정할 필요 없어요.가장 큰 문제는 작동 방식입니다.페이지 끝에 있을 수 있는 특정 요소로 이동할 뿐입니다.사용자는 다음 사항을 파악할 수 없습니다.
- 페이지가 스크롤업되었습니다.
- 페이지가 스크롤 다운되었습니다.
- 그들은 다른 곳으로 옮겨졌습니다.
처음 두 개는 스크롤 위치로 결정할 수 있습니다. 그런데 누가 점프를 하기 전에 사용자가 스크롤 위치를 기록했다고 합니까?그래서 그것은 결정적이지 않은 행동입니다.
마지막은 특히 페이지가 보이지 않게 스크롤되는 이동 헤더가 있고 나머지 페이지 디자인이 동일한 페이지에 있는 것을 의미하지 않는 경우(왼쪽 메뉴 모음과 같은 전체 높이 세로 요소가 없는 경우)에 해당할 수 있습니다.이런 문제가 있는 페이지가 몇 페이지나 되는지 놀라실 겁니다.그냥 직접 확인해 보세요.페이지로 이동하여 맨 위에서 확인한 다음 키를 누르고 다시 확인합니다.아마 다른 페이지라고 생각할 것입니다.
scrollintoview한 연결
그렇기 때문에 네이티브 DOM 기능을 사용하는 대신 보기로 스크롤하는 기능을 수행하는 플러그인이 여전히 존재합니다.보통 스크롤을 애니메이션으로 만들어 위에서 설명한 세 가지 문제를 모두 제거합니다.사용자는 쉽게 움직임을 파악할 수 있습니다.
그럴 것 같네요: http://www.quirksmode.org/dom/w3c_cssom.html
저는 마테오 스피넬리의 iScroll-4를 사용하고 iOS 사파리에서도 작동합니다.To 스크롤, ToElement 스크롤, ToPage 스크롤 세 가지 방법이 있습니다.디브 안에 있는 요소들의 순서 없는 목록이 있다고 가정해 보겠습니다.Robert Koritnik이 위에 썼듯이 스크롤을 했다는 것을 보여주기 위해서는 약간의 애니메이션이 있어야 합니다.아래 방법이 그 효과를 가져다 줍니다.
scrollToElement(element, time);
스크롤IntoView에 대해 읽어보시기 바랍니다.필요한 경우
if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
하고 jQuery Alternative 를(를) 할 수 .<html>그리고.<body>요소:
$('html, body').animate({
scrollTop: $("#myElem").offset().top
}, 1000);
시도해 본 적은 없지만, 내장된 스크롤인투뷰 기능을 이용하면 코드를 많이 절약할 수 있을 것 같습니다.애니메이션 액션을 원하는 경우 다음과 같이 수행합니다.
- 컨테이너의 현재 스크롤 위치를 시작 위치로 캐시
- 스크롤에 내장된 실행IntoView
- 스크롤 위치를 END POSITION으로 다시 캐시합니다.
- 용기를 다시 시작 위치로 되돌립니다.
- END POSITION으로 애니메이션 스크롤
CSS가 해결했어 얘들아!!저는 #idSelected로 대상 ID를 선택하고 CSS "scroll-margin-top"으로 스타일링한 후 제 마진 상단을 렘(rems) 단위로 정의했습니다.
#idSelected {
scroll-margin-top: 10rem;
}
언급URL : https://stackoverflow.com/questions/9445842/does-scrollintoview-work-in-all-browsers
'programing' 카테고리의 다른 글
| 장고 쿼리셋과 함께 파이썬 타입 힌트를 사용하는 방법? (0) | 2023.10.09 |
|---|---|
| 워드프레스 API 호출 후 무효 cf7 (0) | 2023.10.09 |
| j수정 방법 정의되지 않은 '_DT_CellIndex' 속성을 설정할 수 없습니까? (0) | 2023.10.04 |
| AngularJS VS ExtJS (0) | 2023.10.04 |
| pandas apply function that returns multiple values to rows in pandas dataframe (0) | 2023.10.04 |