[英]Long UL list in DIV, auto scroll to LI element
I have such a weird problem, I have a div 我有这么奇怪的问题,我有一个div
_inputHelper // it has fixed height ( 200px )
with very,very long <ul>
list in it ( around 200 of elements) and I would like to scroll using jQuery to some <li>
on the list, but the problem is that, when I scroll whole list in such a way: 包含非常非常长的
<ul>
列表(大约200个元素),我想使用jQuery滚动到列表中的某些<li>
,但问题是,当我以这样的方式滚动整个列表时:
$( _inputHelper.find('ul') ).animate( { top : -1 * ( $(_this).position().top - $(_this).height() ) } , 200);
_this is a LI element I would like to scroll to
is scrolled down in good place, but I cannot scroll list using mouse, here is a printscreen to be more precise: 在适当的位置向下滚动,但我无法使用鼠标滚动列表,这里是一个更精确的打印屏幕:
I think I may scroll in wrong way, but I've tried also scrollTop/margin-top and it still didn't work. 我想我可能会以错误的方式滚动,但我也尝试过scrollTop / margin-top,它仍然无效。
some tests: http://jsfiddle.net/uk5xqfry/3/ 一些测试: http : //jsfiddle.net/uk5xqfry/3/
Any help? 有帮助吗?
Based on your Fiddle you need to use scrollTop
, try this: 基于你的小提琴你需要使用
scrollTop
,试试这个:
$('.input-helper').animate({
scrollTop : $("#test").position().top,
}, 200);
Check the Demo Fiddle 检查演示小提琴
In your code you are just moving the ul
element and then is out of the parent view; 在您的代码中,您只是移动
ul
元素,然后超出父视图; now with this you are changing the scroll of the parent. 现在,您正在更改父级的滚动。
I seem to remember having this issue once, a number of years back (scrolling an inner element to a certain point, versus scrolling the viewport to an element) and I think I resolved it with a jQuery plugin that I found. 我好像记得曾经有过这个问题,多年前(将内部元素滚动到某一点,而不是将视口滚动到一个元素),我想我用一个jQuery插件解决了它。 Made it simple.
简单。
https://github.com/flesler/jquery.scrollTo https://github.com/flesler/jquery.scrollTo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.