Блог

У меня есть div, который постоянно передает потоковые данные и обладает функциональностью, позволяющей ему автоматически прокручиваться вниз, постоянно отображая последнюю информацию в поле зрения пользователя.

Однако проблема с моей текущей реализацией заключается в том, что этому элементу все равно, хочет ли пользователь прокручивать вверх и видеть строки, которые были напечатаны ранее. Как только появляются новые данные POSTed , div возвращает скроллер обратно в низ. Учитывая, что обновления происходят очень часто (~ 500 мс), это может сильно раздражать пользователя, который хочет просмотреть весь журнал на досуге.

В идеале, вот что я хочу сделать с этим div

• Когда пользователь щелкает внутри самого div или полосы прокрутки ( overflow:auto ), автопрокрутка немедленно отключается.
• Как только пользователь щелкает снаружи, автопрокрутка снова включается.
• При первой загрузке страницы для div по умолчанию установлено значение «Не сфокусировано» (т. Е. автопрокрутка происходит, если пользователь нигде не нажимает)

Код:

 <script type="text/javascript">
    $(function () {
        $("#testMonitor").everyTime(500, function () {
            $("#testMonitor").attr({ scrollTop: $("#testMonitor").attr("scrollHeight") - $('#testMonitor').height() });
        });
    });        
</script>

<script type="text/javascript">
    $("div#testMonitor").attr("tabindex", -1).focusin(function () {
        $("#testMonitor").attr({ scrollTop: $("testMonitor").height() });
    });
</script>
  

Первый фрагмент — это моя автоматическая прокрутка, которая работает так, как ожидалось. Предполагается, что вторая часть установит scrollTop на «нормальную» высоту при onFocus.

Как я могу изменить свою функцию focusin, чтобы она вела себя так, как требуется?

Проще, чем вы могли подумать.

1) Создайте флаг

 var autoScrollEnabled = true;
  

2) Измените автоматическую прокрутку, чтобы она запускалась только при значении autoScrollEnabled

 $(function () {
    $("#testMonitor").everyTime(500, function () {
        if (autoScrollEnabled == true) {
            $("#testMonitor").attr({ scrollTop: $("#testMonitor").attr("scrollHeight") - $('#testMonitor').height() });
        }
    });
});
  

3) Добавьте код для переключения автоматической прокрутки везде, где это уместно

 toggleAutoScroll();

function toggleAutoScroll() {
    autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
    if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
        $("#testMonitor").attr({ scrollTop: $("#testMonitor").attr("scrollHeight") - $('#testMonitor').height() });
    }
}