使用JS或jQuery滚动容器内的特定元素

Question

我有巨大的侧边栏元素，并且当页面被滚动的侧边栏指向当前在视口中的元素。但有时活动元素不在侧栏可见空间之外，即低于或高于边界。然后用户需要手动滚动才能看到活动元素。

我想尝试使用逻辑来确定活动元素是否在侧栏可见空间外，如果需要则自动滚动。

 $(window).on('scroll', function() { 
      var scrollTop = $(this).scrollTop(); 

      var container = $('#sectionMenu'); 
      var containerHeight = container.height(); 

      $(data).each(function() { 
       var topDistance = $(this).offset().top - 250; 
       var id = $(this).attr('id'); 
       var elem = $('#_' + id); 
       if ((topDistance) < scrollTop && (topDistance + $(this).height() * 0.95) > scrollTop) { 
        if (autoScrollFlag) { 
         if (!elem.hasClass('sideBarActive')) { 
          var scrollPosition = elem.offset().top - container.offset().top; 
          removeActiveMenuItems(data); 
          elem.addClass('sideBarActive'); 

          if (containerHeight < scrollPosition) { 
           // TODO automated scroll 
          } 
         } 
        } 
        autoScrollFlag = 1; 
       } 
      }); 
     }); 

Answer 1

已经为我工作的解决方案是这样的。

if (containerHeight < scrollPosition) { 
    container.animate({ 
     scrollTop: '+=100px' 
    }, 800); 
}