자바스크립트 스크롤To 메서드가 아무 것도 하지 않습니까?
그래서 저는 필사적으로 페이지에서 스크롤 기능을 작동시키기 위해 노력하고 있습니다.운이 없자 나는 그냥 고수하기로 결심합니다.window.scrollTo(0, 800);내 페이지에 스크롤을 할 수 있는지 확인할 수 있습니다.아무 일도 일어나지 않습니다.확장되는 아코디언이 있는데 그 안에 있는 특정 요소로 스크롤하고 싶습니다.하지만 지금으로서는 스크롤하는 것을 보고 싶을 것입니다.누구 우연히 마주친 사람?
감사합니다!
이와 같은 것을 가지고 있는 경우:
html, body { height: 100%; overflow:auto; }
body와 html의 높이 정의가 모두 100%이고 스크롤이 활성화된 경우, 컨텐츠가 100% body 높이를 초과할 때 스크롤 막대(사용자가 사용할 수 있음)가 표시되더라도 window.scrollTo(및 모든 파생 스크롤 메커니즘)가 작동하지 않습니다.왜냐하면 지금 보시는 스크롤 바가 창문의 것이 아니라 몸의 것이기 때문입니다.
해결책:
html { height: 100%; overflow:auto; }
body { height: 100%; }
setTimout을 사용하여 이 문제를 해결했습니다.angularjs를 사용하고 있었는데 바닐라js에서도 도움이 될 수 있을 것 같습니다.
setTimeout(function () {
window.scrollTo(0, 300);
},2);
저는 jQuery method animate()를 사용하여 이 문제를 해결할 수 있었습니다.다음은 구현 예입니다.
$('#content').animate({ scrollTop: elementOffset }, 200);
선택자가 ID = "content"의 div를 가져오는 중입니다.그러면 스크롤 탑을 옵션으로 해서 애니메이트 방식을 적용하고 있습니다.두 번째 파라미터는 애니메이션 지속 시간(밀리초)의 시간입니다.이것이 다른 사람에게 도움이 되길 바랍니다.
때로는 CSS만의 문제가 아니라 브라우저가 원인이었습니다.나는 이 코드로 해결해야 했습니다.
if ('scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual'
}
이를 통해 개발자가 스크롤 변경에 대한 소유권을 갖게 됩니다.자세한 내용은 여기에서 확인하시기 바랍니다.
이런 일이 어제 저에게 일어난 이유는 제가.overflow: auto어린아이였던 디브에서<html>그리고.<body>.
그래서 그걸 알게 됐어요.window.scrollTo()일을 하려면, 당신은 반드시overflow: auto(아니면 뭐든)overflow-y: scroll)을 설정합니다.<html>요소.
그것은 내가 배운 것입니다.document.body.scrollTo()일을 하려면, 당신은 반드시overflow을 짓누르다<body>.
다른 요소에도 사용할 수 있다는 것을 알았습니다.document.querySelector('#some-container').scrollTo().
저 같은 경우에는.
window.scrollTo()작업을 하기 위해 오버플로 CSS를 켭니다.<html>.
스크롤 가능한 "정확한" 요소에 대해 다른 답변이 없다는 것이 놀랍습니다.루트 HTML 요소는 다음에 대해 스크롤 가능해야 합니다.window.scrollTo()일하기 위해.내 자식 요소들은 모두 다운스트림에<html>하기로 되어 있습니다height: auto.
내 CSS는 다음과 같습니다.
html { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }
body { width: 100%; height: auto; }
#app { width: 100%; height: auto; }
저도 똑같은 문제가 있었습니다.스크롤 전 포커스 윈도우 To가 효과가 있었습니다.
window.focus();
window.scrollTo(0,800);
html과 body의 높이를 자동으로 설정하는 것이 요령이었습니다.
html, body { height: auto }
TL;DR
document.querySelector('#dummy_element').scrollIntoView()
나를 위해 일했습니다.
설명.
저도 다음 사항에 대해 문제가 있었습니다.
document.querySelector('#some-container').scrollTo()
window.scrollTo()
@agm 1984이 여기서 언급한 바와 같이:
그런 다음 다음을 사용해 보았습니다.document.querySelector('#dummy_element').scrollIntoView()
저한테는 잘 됐어요.
여기서 차이점을 더 잘 설명합니다.
빠른 차이:
Element.scrollIntoView() 메서드는 호출된 요소를 브라우저 창의 Viewport로 스크롤합니다.
Window.scrollTo() 메서드는 문서의 특정 좌표 집합으로 스크롤합니다.
이것이 제가 리액트에서 하는 일입니다. 저는 루트 요소를 가지고 있기 때문에, 제 페이지의 첫 번째이자 가장 바깥쪽에 있는 디브로서, 그 요소의 맨 위로 스크롤합니다.
const root = document.getElementById('root');
root.scrollTo({
top: 0,
left: 0,
behavior: 'smooth',
});
오늘도 이와 같은 문제를 겪고 있었는데 자동으로 생성된 도트타입 블록을 꺼냈을 때 다음과 같은 사실을 알게 되었습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
창.scrollTo(0,800)은 원래 사용하려던 ExtJs scrollTo() 함수와 함께 작동하기 시작했습니다.블록을 다시 넣었더니 작동이 멈췄습니다.이것이 여러분이 (2년 전에) 마주쳤던 것인지는 모르겠지만, 이것이 같은 문제에 부딪히는 다른 사람에게 도움이 되기를 바랍니다.
저는 이 문제를 가지고 있었고 이 답변들과는 아무런 관련이 없습니다.저에게 문제는 많은 디브들을 부트스트랩 4로 업그레이드 한 후에 처음 나타났습니다.display: flex 의 의.scrollTop()플렉스 레이아웃에서는 잘 작동하지 않습니다.
제가 해결할 수 있는 방법은 이전 코드를 다음과 같이 변경하는 것이었습니다.
$("#someId").scrollTop(1000);
// or
$("#someId").animate({ scrollTop: 1000 }, 500);
로.
$("html,#someId").scrollTop(1000);
// or
$("html,#someId").animate({ scrollTop: 1000 }, 500);
유일한 차이점은 스크롤해야 하는 div 앞에 있는 "html"에 추가하는 것입니다.
내가 그것을 이해하는 것을 도와준 이 문제에 대한 소품들.
React 앱에서 window.scrollTo를 setTimeout으로 설정하면 됩니다.
useEffect(() => {
if (scrollPosition > 0) {
setTimeout(() => window.scrollTo(0, scrollPosition), 0);
setScrollPosition(0);
}
}, [scrollPosition]);
스크롤이 어디에 꽂혀 있는지 태그에 CSS overflow[/-x-y] : hidden이 표시되는지 확인합니다.그것은 버그를 고쳤습니다.
:window.scrollBy(0,200);작동 중입니다.
나는 이유를 모르겠다.window.scrollTo(0,200);작동하지 않고 있습니다.window.scrollBy(0,200);작동 중입니다.
document.body.scrollTo(0, 800)이것으로 제 문제가 해결되었습니다.
어떤 이유에서인지 둘 다
html,body {overflow: hidden}
설정해야 하지만 다음을 사용하여 프로그래밍 방식으로 스크롤할 수 있습니다.
document.body.scrollTop = document.body.scrollHeight; // scrolls to bottom
document.body.scrollTop = 0; // scrolls to top
첫째, (아이프레임에 있더라도) 스크롤할 수 있을 정도로 페이지가 넓습니까?만약 그렇지 않다면, 혹은 당신이 확신할 수 없다면, 거대한 디브를 만들고, 그 아래에 무엇인가를 두세요.한번 스크롤해보세요.
다음으로, iframe에서 스크롤할 경우, 프레임 소스와 같은 페이지에 코드를 놓습니다.이렇게 하면 문서나 특정 요소를 다른 창에 가져올 걱정이 없어지기 때문에 까다로울 수 있습니다.아, 맞아요, 그 부분 제대로 맞으신 거 맞으세요?파이어버그를 사용하는 것이 도움이 될 수 있습니다.
마지막으로 스크롤이 발생할 것으로 예상되는 선에 중단점(Firebug 사용)을 놓습니다.그 고장에 맞습니까?그렇지 않으면 코드가 실행되지 않으며 스크롤은 문제가 아닙니다.
(앞서 질문하신 내용을 뒷받침하는 내용으로 답변을 드렸습니다.
편집:
스크롤은 창별로 이루어집니다.스크롤할 수 없는 프레임에 있으면 스크롤하는 것이 없습니다.프레임의 해당 요소를 스크롤하려면 해당 요소의 간격띄우기를 현재 창으로 가져와 포함하는 프레임의 간격띄우기에 추가합니다.그것이 효과가 있어야 해요.
슬라이드 다운 후 스크롤이 완료된 경우 디브가 이와 같이 애니메이션을 완료할 때까지 기다려야 합니다.
$('#div-manual-lots').slideDown(200, function () { $("html, body").animate({ scrollTop: $(document).height() }, 1000) });
언로드 속성을 사용하는 것이 효과적이었습니다.
window.onunload = function(){ window.scrollTo(0,0); }
제 경우에는 같은 이름의 js 함수 "scrollTo"를 사용했습니다. ...:O 이름을 바꾸는 것이 문제를 해결했습니다.
html 태그 설정 시도:
html {
height: auto;
overflow: auto;
}
저한테는 효과가 있어요.
언제
window.scrollTo(x,y)브라우저의 콘솔에서 작동하지 않으며 스크롤 후 돔이 렌더링되므로 이를 사용할 수 있습니다.
스플래시나 자바스크립트 렌더링 서비스에서 스크롤하려면 js 아래에서 실행합니다.
document.body.style.height = "2000px";
window.scrollTo(0,2000);
스플래시에서 다음과 같은 작업을 수행할 수 있습니다.
assert(splash:wait(10))
assert(splash:runjs("document.body.style.height = '2000px';"))
assert(splash:runjs("window.scrollTo(0,2000);"))
assert(splash:wait(2))
assert(splash:runjs("window.scrollTo(0,0);"))
이 코드: http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToExample.htm 를 사용하여 html 파일로 저장합니다.브라우저의 뷰포트보다 큰 매우 큰 div를 하드코딩하는 방법에 주목합니다.스크롤을 실행하려면 페이지 하단에 내용을 추가해야 할 수도 있습니다.
언급URL : https://stackoverflow.com/questions/1174863/javascript-scrollto-method-does-nothing
'programing' 카테고리의 다른 글
| Android 푸시 알림:알림에 표시되지 않는 아이콘, 대신 흰색 사각형이 표시됨 (0) | 2023.10.20 |
|---|---|
| Angularjs - 지시 파일을 분리하지만 동일한 모듈에 유지 (0) | 2023.10.20 |
| Classic ADO / ODBC / Oracle 10g EZConnect의 연결 문자열 구문 (0) | 2023.10.20 |
| 포크() 다음에 먼저 실행하는 사람은 부모입니까, 자식입니까? (0) | 2023.10.20 |
| 준비 상태 변경 시 XMLHttpRequest가 여러 번 호출됨 (0) | 2023.10.20 |