滚动元素到视图中滚动容器

问题描述：

.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值是不正确的，因为它似乎从页面顶部获得偏移量，我希望根据它在滚动容器中的位置获取偏移值。

任何帮助表示赞赏！

这里有一个小提琴。它是否证明了这个问题？它似乎工作。 http://jsfiddle.net/isherwood/LqQGR – isherwood

是的，问题是我并不真正控制它滚动到什么位置。另外，如果我点击两次，它会滚动两次，而不是坚持以前滚动到的位置。 – CLiown

这个问题没有解决？ – isherwood

答

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

你想你的scrollTop的设置元素的位置（容器的顶部和链路之间的距离）加上当前scrollTop的（顶部之间的距离在包含内容和当前地方才看得到

。另外：你需要你的scrollingContainer设置为position: relative所以它的内部内容的offset parent

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

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

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

哈哈哈，很容易就让我们失望了，我没有注意到，因为你偶然的工作很好。您需要将您的scrollingContainer设置为position：relative，以便它是偏移父级。我已经更新了我的答案，因为现在它更简单。 – Nate

顺便说一下，我的答案比单独添加点击事件侦听器到所有锚点标记的答案要好。这只会增加一个侦听器，这是更高性能的。你可以在这里阅读更多有关委托事件的信息：http://api.jquery.com/on/#direct-and-delegated-events – Nate

顺便说一句，刚才意识到你是一位同事回答者，而不是原始问题的提问者。希望能让我的评论更有意义。抱歉! – Nate

答

的this answer的变化的伎俩：

http://jsfiddle.net/isherwood/LqQGR/14

var myContainer = $('.scrollingContainer') 

$(myContainer).on('click', 'a', function() { 
    var scrollTo = $(this); 
    myContainer.animate({ 
     scrollTop: scrollTo.offset().top - myContainer.offset().top + myContainer.scrollTop() 
    }); 
});

滚动元素到视图中滚动容器

相关推荐