将元素滚动到可滚动容器中的视图中

Posted 2023-03-10

【中文标题】将元素滚动到可滚动容器中的视图中

【英文标题】：Scroll element into view in scrollable container

【发布时间】：2013-12-04 17:56:49

【问题描述】：

我有一个带有硬编码高度的滚动容器：

.scrollingContainer 
    overflow: scroll;
    height: 400px;

此滚动容器包含一个项目列表，当我单击要滚动容器的项目时，单击的项目位于滚动容器的顶部。

$('.scrollingContainer li a').click( function(event) 
  var vpHeight = $('.scrollingContainer').height();
  var offset = $(this).offset();
  $('.scrollingContainer').animate(
    scrollTop: vpHeight - offset.top
  , 500);
);

以上是我目前所拥有的，我无法进行需要执行的数学计算。另外我认为var offset 值不正确，因为它似乎是从页面顶部获取偏移量，我希望根据它在滚动容器中的位置获取偏移值。

任何帮助表示赞赏！

【问题讨论】：

这是一个小提琴。它是否说明了问题？它似乎工作。 jsfiddle.net/isherwood/LqQGR

是的，问题是我并没有真正控制它滚动到的位置。此外，如果我单击两次，它会滚动两次，而不是停留在先前滚动到的位置。

【参考方案1】：

this answer 的变体可以解决问题：

var myContainer = $('.scrollingContainer')

$(myContainer).on('click', 'a', function () 
  var scrollTo = $(this);

  myContainer.animate(
    scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop()
  );
);

Fiddle demo

【参考方案2】：

这是一个活生生的例子：http://jsfiddle.net/LqQGR/12/

你想将你的scrollTop设置为元素的位置（容器顶部和链接之间的距离）加上当前的scrollTop（包含的顶部之间的距离 内容及其可见的当前位置。

另外：您需要将您的 scrollingContainer 设置为 position: relative，以便它是其中内容的 offset parent。

var $scrollingContainer = $('.scrollingContainer');

$scrollingContainer.on('click', 'a', function (event) 
    var scrollTop = $scrollingContainer.scrollTop();
    var link      = $(event.currentTarget);
    var position  = link.position();

    $scrollingContainer.animate(
        scrollTop: position.top + scrollTop
    , 500);
);

顺便说一句，我的答案优于将点击事件侦听器单独添加到所有锚标记的答案。这只增加了一个监听器，性能更高。 Read more about delegated events