Прокрутите вниз до раздела с помощью Javascript

Я создал окно, использующее html и javascript, чтобы отображать сообщения журнала отображения, созданные моим веб-сайтом. Я хочу настроить его так, чтобы при открытии окна журнала он автоматически прокручивался в нижней части сообщений журнала. Я получил это так, чтобы сообщения журнала отображались правильно, но у меня возникли проблемы с работой автоматического прокрутки.Прокрутите вниз до раздела с помощью Javascript

Мой HTML/JavaScript выглядит следующим образом:

<body> 
<div class="container-fluid"> 
    <div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
     <h4 class="text-center">Log Messages</h4> 
    </div> 
    <div class="panel-body"> 
     <div class="content" id="logtext"> 
     <font face="courier"> 
      <span id="show" class='value'></span> 
     </font> 
     </div> 
    </div> 
    </div> 
    <script language="javascript" type="text/javascript"> 
    function saveLogs(data){ 
     sessionStorage.setItem("logs",data.message); 
    } 
     $(document).ready(
     function() { 
      setInterval(function() { 
      Dajaxice.InterfaceApp.getLogs(saveLogs); 
      var logs = sessionStorage.getItem("logs"); 
      document.querySelector('.content .value').innerText = logs; 
      //I tried doing this and nothing happened. 
      var objDiv = document.getElementById("logtext"); 
      objDiv.scrollTop = objDiv.scrollHeight; 
      }, 1000); 
     }); 
    </script> 
</div>   
</body>

Вызов dajaxice только в основном захватывая последние п строк из файла журнала, который у меня есть, а затем отправлять их в функцию JS I определяется как saveLogs() ,

Я пробовал использовать некоторые из решений, приведенные в similar questions, но им не удавалось заставить их работать.

EDIT Я попытался установить его так:

<div class="panel-body"> 
     <div class="content" id="logtext"> 
     <script language="javascript" type="text/javascript"> 
      document.getElementById('bottomspan').scrollIntoView(); 
     </script> 
     <font face="courier"> 
      <span id="show" class='value'> 
      </span> 
      <div id='bottomspan'></div> 
     </font> 
     </div> 
    </div> 
    </div> 
    <script language="javascript" type="text/javascript"> 
    function saveLogs(data){ 
     sessionStorage.setItem("logs",data.message); 
    } 
     $(document).ready(
     // document.getElementById('bottomspan').scrollIntoView(); 
     function() { 
      setInterval(function() { 
      Dajaxice.InterfaceApp.getLogs(saveLogs); 
      var logs = sessionStorage.getItem("logs"); 
      document.querySelector('.content .value').innerText = logs; 
      var el = document.getElementById('bottomspan') 
      el.scrollIntoView(); 
      var height = el.style.clientHeight 
      window.scrollBy(0, height); 
      },700); 
     }); 
    </script>

Это работает только каждый раз, когда страница обновляется с новыми сообщениями оно восходит к основанию; это затрудняет просмотр старых сообщений вверху. Есть ли способ, чтобы он начинался в нижней части div, но не заставлял пользователя отступать, если они смотрят на сообщения в верхней части?

источник

2015-08-26 kdubs

Вы уверены, что '# logtext' - это элемент, способный прокручиваться? –

Вот попробуйте:

document.getElementById('logtext').scrollIntoView();

EDIT

document.getElementById('bottomspan').scrollIntoView(); 

<font face="courier"> 
     <span id="show" class='value'> content.... 
      <span id='bottomspan'></span> 
     </span> 
</font>

EDIT

var el = document.getElementById('logtext') 
el.scrollIntoView(); 
var height = el.style.clientHeight 
window.scrollBy(0, height - window.innerHeight);

Редактировать ответить Редактировать

<script language="javascript" type="text/javascript"> 
    function saveLogs(data){ 
     sessionStorage.setItem("logs",data.message); 
    } 
    $(document).ready(
    function() { 
     setInterval(function() { 
     Dajaxice.InterfaceApp.getLogs(saveLogs); 
     var logs = sessionStorage.getItem("logs"); 
     document.querySelector('.content .value').innerText = 
     },700); 

     var el = document.getElementById('bottomspan') 
     el.scrollIntoView(); 
     var height = el.style.clientHeight 
     window.scrollBy(0, height); 
    });

источник

2015-08-26 16:37:51

Его также хорошо, потому что он поддерживается всеми основными браузерами и не требует каких-либо дополнительных библиотек, таких как jQuery –

Я попытался добавить это под 'document.querySelector ('. Content .value'). InnerText = logs;', но вызывает прокрутку начинать в верхней части div каждый раз, когда страница обновляется. – kdubs

- ваш диапазон выше или ниже содержимого или является содержимым в промежутке? –

Попробуйте использовать

var $objDiv = $("#logtext"); 
$objDiv.scrollTop($objDiv.height());

Ваш скрипт работает отлично: http://jsfiddle.net/b1tf63yd/1/

источник

2015-08-26 16:41:15 Jez

Ничего не произошло, когда я добавил эти строки. – kdubs

Даже никаких ошибок в консоли? – Jez

Нет, никаких ошибок. – kdubs

Просто сосредоточиться на элементе, чтобы сделать элемент видимым.

<span id="feed_item" /> 

document.getElementById("feed_item").focus();

источник

2016-02-29 15:52:30 pamu

Прокрутите вниз до раздела с помощью Javascript

ответ

Смежные вопросы