scrollTop не работает в боковой панели навигации / div

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

<div class="wrapper">
   <nav id="sidebar">
      <ul id="mainMenu">
         <li id="menuItem1">item 1</li>
         <li id="menuItem2">item 2</li>
         <li id="menuItem3">item 3</li>
         .
         .
         .
      </ul>
   </nav>
   <div id="content">
      Main contents goes here on the right side...
   </div>
</div>

Вот css для бокового меню:

#sidebar {
  width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all 0.3s;
}
#content {
  width: calc(100% - 250px);
  min-height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
}

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

document.getElementById('sidebar').scrollTop = 400;
document.getElementById('menuItem20').scrollIntoView();
location.href = "#menuItem20";

Ни один из вышеперечисленных кодов не работает. Я могу прокручивать основную часть страницы с помощью javascript, но я просто не могу заставить работать левое меню. Примечание: левое меню отлично прокручивается с помощью колеса прокрутки мыши. Любая помощь очень ценится.


javascript sidebar bootstrap-4 scrollable scrolltop
person Mochi08    schedule 30.10.2019    source источник
comment
можете ли вы сделать это более ясным, пожалуйста, добавьте полный пример, иллюстрирующий проблему   -  person Ahmed I. Elsayed    schedule 30.10.2019
comment
Можете ли вы установить скрипку?   -  person    schedule 30.10.2019

Ответы (1)


arrow_upward
0
arrow_downward

Спасибо за попытку помочь. Я понял проблему. Я использую шаблон, найденный в Интернете, для меню боковой панели, и в шаблоне используется плагин под названием «mCustomScrollbar». Это то, что мешает нормальной работе прокрутки javascript. К счастью, плагин предоставляет собственную функцию прокрутки. Это то, что работает для меня:

var yOffset = $("menuItem20").position().top;

$("#sidebar").mCustomScrollbar({
   theme:"minimal"
});

$("#sidebar").mCustomScrollbar("scrollTo", yOffset);

Целью этого фрагмента кода для меня является автоматическая прокрутка активного элемента меню при перезагрузке веб-страницы. Можно также использовать window.innerHeight для вычисления наилучшего yOffset для центрирования активного элемента меню, но это выходит за рамки этого вопроса.

person Mochi08    schedule 31.10.2019