Механизм Javascript для автоматической прокрутки до нижней части растущей страницы? - PullRequest
Новая
       8

Механизм Javascript для автоматической прокрутки до нижней части растущей страницы?

10 голосов
/ 23 декабря 2008

Надеюсь, это будет простой ответ для тех, у кого позади Javascript ...

У меня есть файл журнала, который отслеживается скриптом, который передает новые строки в журнале любым подключенным браузерам. Несколько человек отметили, что то, что они хотят видеть, это скорее поведение «tail -f» - последние строки всегда будут внизу страницы браузера, пока зритель не прокрутится назад, чтобы что-то увидеть. Прокрутка вниз до конца вернет вас к режиму автопрокрутки.

Мой вывод из Google по этому вопросу - надеюсь - просто вопрос о том, что я ничего не знаю о javascript и, следовательно, не знаю, какие ключевые слова искать. Мне не нужно полное решение - просто «достаточно близко», которое позволяет мне прыгать и пачкать руки.

EDIT:

Я пытался использовать идею scrollTop / scrollHeight, но явно что-то упустил. Я почти ничего не сделал с Javascript, поэтому, опять же, я, вероятно, задаю вопросы очень низкого уровня: 

<html><body>
<script type="text/javascript">
for (i=0; i<100; i++)
{
    document.write("" + i + "<br />");
    document.scrollTop = document.scrollHeight;
}
</script>
</body></html>

Это была одна из многих перестановок. Очевидно, я не могу выводить журнал построчно в javascript, но я просто пытаюсь увидеть правильное поведение. Что за недостающее звено мне нужно здесь?

ИЗМЕНИТЬ СНОВА: Это превратилось в гораздо более интересную проблему, которую я впервые ожидал. Предложение кода с использованием window.scroll делает свое дело. Я начал играть с ограничением прокрутки, чтобы иметь место только тогда, когда браузер был в нижней части тела документа. Это достаточно просто сделать в теории, но на практике это наталкивается на загвоздку:

Каждый раз, когда вы получаете новый текст с сервера, размер тела увеличивается, и ваша текущая позиция прокрутки больше не находится внизу документа. Вы больше не можете определить разницу (используя scrollHeight, clientHeight и scrollTop), прокручивал ли пользователь вверх или только что текст вырвался за его пределы.

Я думаю, что если это сработает, мне придется взять на себя обязательство иметь событие JS, которое срабатывает, когда пользователь прокручивает и отключает прокрутку, если они находятся над нижней частью окна, но поворачивает его обратно, если они прокрутились вниз до точки, где они фактически находятся внизу представления. Я смотрю на событие onScroll и, учитывая, что математика по переменным, о которых я говорил, работает очень хорошо, я думаю, что я на правильном пути. Всем спасибо за ваш вклад!

Ответы [ 6 ]

12 голосов
/ 23 декабря 2008 
x = 0;  //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);
7 голосов
/ 14 июня 2012

Для прокрутки всего документа используйте это: 

window.scrollTo(0, document.body.scrollHeight);

если у вас только один прокручиваемый div или что-то еще, то процесс будет другим: 

var obj = $('id');
obj.scrollTop = obj.scrollHeight;
3 голосов
/ 15 декабря 2010

Хорошая функция jQuery делает это 

$('html,body').animate({ scrollTop: element.offset().top }, 'slow');

Это сработало для меня, я использовал его для автоматической прокрутки до выпадающего меню, чтобы привести его в фокус

3 голосов
/ 23 декабря 2008 
for (i = 0; i < 100; i++) {
    document.write("" + i + "<br />");
    window.scroll(0,document.body.offsetHeight);
}
1 голос
/ 24 июня 2011

Это объясняет, какой установлен интервал времени - http://www.w3schools.com/jsref/met_win_setinterval.asp

Это объясняет, какое установленное время ожидания - http://www.w3schools.com/jsref/met_win_settimeout.asp

Это прокрутит страницу с помощью javascript и остановится через 6 секунд 

    <script type = "text/javascript" >

    var x;
    function autoscroll(){
    self.scrollBy(0,x)
    }

    function playautoscroll(){
    x = 1;
    setInterval('autoscroll()',0.01);
    stop();}

    function onetozero(){
    x=0;
    }

    function stop(){
    setTimeout ("onetozero()",6000);
    }
    window.onload=playautoscroll

    </script>
0 голосов
/ 23 декабря 2008 
obj.scrollTop = obj.scrollHeight;
...