在div中滚动浏览部分时将活动类添加到菜单li

<ul>
  <li class="active">菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
  <li>菜单项4</li>
</ul>

var menuItems = document.querySelectorAll('ul li');
var div = document.querySelector('div');

div.addEventListener('scroll', function() {
  var scrollTop = div.scrollTop;
  
  // 根据滚动位置判断当前活动的菜单项
  for (var i = 0; i < menuItems.length; i++) {
    var menuItem = menuItems[i];
    var section = document.querySelector(menuItem.getAttribute('data-section'));
    var sectionTop = section.offsetTop;
    var sectionHeight = section.offsetHeight;
    
    if (scrollTop >= sectionTop && scrollTop < sectionTop + sectionHeight) {
      menuItem.classList.add('active');
    } else {
      menuItem.classList.remove('active');
    }
  }
});

<ul>
  <li class="active" data-section="#section1">菜单项1</li>
  <li data-section="#section2">菜单项2</li>
  <li data-section="#section3">菜单项3</li>
  <li data-section="#section4">菜单项4</li>
</ul>

<div>
  <div id="section1">内容区块1</div>
  <div id="section2">内容区块2</div>
  <div id="section3">内容区块3</div>
  <div id="section4">内容区块4</div>
</div>