Итак, я desperatley пытается получить некоторые функции прокрутки для работы на странице. После того, как я не повезло, я решил просто прикрепить window.scrollTo(0, 800); на моей странице, чтобы увидеть, могу ли я пропустить прокрутку. Ничего не происходит. У меня есть аккордеон, который расширяется, а затем я хочу прокрутить его до определенного элемента. Но на данный момент я был бы рад просто увидеть прокрутку. Кто-нибудь сталкивается с этим?
Спасибо!
Мне удалось решить эту проблему, используя метод jQuery animate(). Вот пример реализации, с которым я пошел:
$('#content').animate({ scrollTop: elementOffset }, 200);
Селектор получает div с ID = "content". Затем я применяю метод animate на нем с scrollTop в качестве опции. Второй параметр - это время в миллисекундах для продолжительности анимации. Надеюсь, это поможет кому-то другому.
Если у вас есть что-то вроде этого:
html, body { height: 100%; overflow:auto; }
Если оба тела и html имеют определение высоты 100%, а также включена прокрутка, window.scrollTo(и все производные механизмы прокрутки) не работают, несмотря на отображение полосы прокрутки (которая может использоваться пользователем), когда содержание превышает 100% роста. Это потому, что полоса прокрутки вы видите не в окне, а в теле.
Решение:
html { height: 100%; overflow:auto; }
body { height: 100%; }
Я исправил эту проблему с помощью setTimout. Я использовал angularjs, но, возможно, это может помочь и в vanilla js.
setTimeout(function () {
window.scrollTo(0, 300);
},2);
Иногда это не просто проблема css, для меня это был браузер. Я должен был решить это с помощью этого кода.
if ('scrollRestoration' in window.history) {
window.history.scrollRestoration = 'manual'
}
Это позволяет разработчику взять на себя ответственность за изменения прокрутки. Подробнее об этом здесь
У меня была такая же проблема сегодня, а затем я обнаружил, что когда я вынул автоматически созданный блок doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Window.scrollTo(0,800) начал работать вместе с функцией ExtJs scrollTo(), которую я изначально пытался использовать. Я вернул блок и перестала работать. Я не знаю, было ли это то, с чем вы сталкивались (2 года назад), но, надеюсь, это помогает кому-то другому столкнуться с одной и той же проблемой.
У меня была такая же проблема. Окно фокусировки до прокрутки у меня работало.
window.focus();
window.scrollTo(0,800);
проверьте, не помечен ли ваш тег, где вы подключены, прокрутка CSS переполнения [/- x-y]: скрыто. он исправил ошибку
Во-первых, ваша страница достаточно велика для прокрутки (даже если она в iframe)? Если нет, или вы не уверены, сделайте гигантский div, а затем положите что-то ниже. Попробуйте прокрутить к нему.
Затем, если ваша прокрутка в iframe, поместите свой код на ту же страницу, что и источник кадра. Таким образом, вам не нужно беспокоиться о том, чтобы получить документ или конкретный элемент в другом окне, что может быть сложно. О да, ты уверен, что правильно понял эту часть? Переход с помощью Firebug может помочь вам в этом.
Наконец, поставьте точку останова (используя Firebug) в строке, которая должна вызвать прокрутку. Он попал в точку останова? Если нет, ваш код не выполняется, и прокрутка не является вашей проблемой.
(Я ответил на это, поддерживая контекст из вашего предыдущего вопроса.)
ИЗМЕНИТЬ:
Прокрутка выполняется окном по окну. Если вы находитесь в кадре, который не может прокручиваться, ничто не будет прокручиваться. Если вы хотите, чтобы этот элемент в кадре был прокручен, получите смещение этого элемента в его текущее окно и добавьте его к смещению содержащего фрейма. Это должно сделать трюк.
Для меня установка высоты html и body на auto сделала свое дело.
html, body { height: auto }
Это случилось со мной вчера, потому что у меня был overflow: auto на div, который был ребенком для <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; }
Когда
window.scrollTo(x,y)не работает на консоли браузера, и dom визуализируется после прокрутки, вы можете использовать это.
Для прокрутки на Splash или любом другом сервисе рендеринга JavaScript выполните ниже js:
document.body.style.height = "2000px";
window.scrollTo(0,2000);
В Splash вы можете сделать что-то похожее на это:
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);"))
Ну, очевидно, что он не будет прокручиваться, если ваша страница не будет (по крайней мере, viewport.height - 800). Вы видите полосу прокрутки? В противном случае вы делаете что-то еще неправильно.
Возьмите этот код: http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToExample.htm и сохранить как html файл. Обратите внимание, как он жестко кодирует очень большой div, превышающий окно просмотра браузера. Вероятно, вам нужно добавить контент в нижней части страницы для прокрутки, чтобы даже работать.