scrollTop не работает в боковой панели nav / div - PullRequest
Новая
       29

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

0 голосов
/ 30 октября 2019

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

<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, но я просто не могу заставить работать левое меню. Примечание: левое меню прекрасно прокручивается с помощью колеса прокрутки мыши. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 01 ноября 2019

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

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

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

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

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

...