页面正文滚动时如何滚动元素？

Posted 2023-05-09

【中文标题】页面正文滚动时如何滚动元素？

【英文标题】：How can I scroll an element when page body scrolls?

【发布时间】：2021-03-21 04:20:43

【问题描述】：

我有一个固定的侧导航，其中包含一长串跳转链接。当用户滚动主页内容时，跳转链接会突出显示以显示用户在列表中的位置。

问题是固定侧导航有溢出-y:scroll;当链接被突出显示时，这实际上并不会向上或向下滚动。

https://jsfiddle.net/nz6b7cj9/

html：

<div id="container">
  <div style="float:left">
    <div id="fixed-side-nav">
      <ul>
        <li><a href="link1" class="link1">Jump links</a></li>
        <li><a href="link2" class="link2">Jump links</a></li>
        <li><a href="link3" class="link3">Jump links</a></li>
        <li><a href="link4" class="link4">Jump links</a></li>
        <li><a href="link5" class="link5">Jump links</a></li>
        <li><a href="link6" class="link6">Jump links</a></li>
        <li><a href="link7" class="link7">Jump links</a></li>
        <li><a href="link8" class="link8">Jump links</a></li>
        <li><a href="link9" class="link9">Jump links</a></li>
        <li><a href="link10" class="link10">Jump links</a></li>
        <li><a href="link11" class="link11">Jump links</a></li>
        <li><a href="link12" class="link12">Jump links</a></li>
        <li><a href="link13" class="link13">Jump links</a></li>
        <li><a href="link14" class="link14">Jump links</a></li>
        <li><a href="link15" class="link15">Jump links</a></li>
        <li><a href="link16" class="link16">Jump links</a></li>
        <li><a href="link17" class="link17">Jump links</a></li>
        <li><a href="link18" class="link18">Jump links</a></li>
        <li><a href="link19" class="link19">Jump links</a></li>
      </ul>
    </div>
  </div>

  <div id="content" style="float:left">
    <h2 id="link1">
     HERE
    </h2>
    <p>Content here</p>
    <h2 id="link2">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id="link3">
     HERE
    </h2>        
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <h2 id="link4">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id="link5">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id="link5">
     HERE
    </h2>    
    <p>Content here</p>
    <h2 id="link6">
     HERE
    </h2>    
    <p>Content here</p>
<h2 id="link7">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link8">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link9">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link10">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link11">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link12">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link13">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link14">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link15">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link16">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link17">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link18">
 HERE
</h2> 
    <p>Content here</p>
<h2 id="link19">
 HERE
</h2> 
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>
    <p>Content here</p>    
  </div>
</div>

CSS：

body 
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  position: relative;


#fixed-side-nav
  border:1px solid #ededed;
    padding:10px;
    width:12%;
    background-color:#fff;
    bottom:20px;
    overflow-y:scroll;
    bottom:20px;
    position:fixed;
  top:90px;

#content
  float:left;
  margin-left:200px;
  background-color:white;
  width:100%;


#fixed-side-nav li.active background-color:yellow

jQuery:

jQuery(window).on('load scroll resize', function ()

    // Assign active class to nav links while scrolling
    var windowTop = jQuery(window).scrollTop();
    jQuery('h2').each(function (index, elem) 
        var offsetTop = jQuery(elem).offset().top;
        var outerHeight = jQuery(this).outerHeight(true);

        if( windowTop > (offsetTop - 110) && windowTop < ( offsetTop + outerHeight)) 
            var elemId = jQuery(elem).attr('id');
            jQuery('#fixed-side-nav li.active').removeClass('active');
            jQuery('#fixed-side-nav a.'+elemId).parents('li').addClass('active');
        
    ); 
);

有没有办法可以滚动固定侧导航以显示突出显示的链接？我想在不使用 focus() 的情况下执行此操作，因为这不利于可访问性。

【参考方案1】：

你可以使用Element.scrollIntoView():

jQuery('#fixed-side-nav a.'+elemId).parents('li')[0].scrollIntoView(false);

（注意我们使用[0]从jQuery对象中获取元素）

这个函数还有一些你可以使用的动画选项，在链接的文档中阅读。