I am creating a custom auto suggest-box I need to move on li
items on arrow down press.
so I added tabindex attribute to li it is getting focus. but problem is that it scrolling the div up with some random height that it out the selected li from div.
after arrow down key:
and after some arrow-down key press:
and after that it goes out of screen while mouse down behave perfectly.
Here I made a Demo JSFiddle first click item1
and then press arrow down it behaving same.
Elaborating on my comment
Set the container's scrollTop
to index of focused li
* li height
.
return false
upon keydown to prevent normal browser scrolling of overflown parent.
$('div.container').on('focus', 'li', function() {
var $this = $(this);
$this.addClass('active').siblings().removeClass();
$this.closest('div.container').scrollTop($this.index() * $this.outerHeight());
}).on('keydown', 'li', function(e) {
var $this = $(this);
if (e.keyCode === 40) {
$this.next().focus();
return false;
} else if (e.keyCode === 38) {
$this.prev().focus();
return false;
}
}).find('li').first().focus();
jsfiddle http://jsfiddle.net/38zR3/42/
Have you tried using anchor instead of tabindex? eg
<li><a href="#"></li>
In my experience some browsers cannot handle the focus on tabindex correctly
我有一个这样的问题,并通过将包含div的CSS样式overflow
设置为none
或hidden
来解决它,具体取决于您的偏好。
添加.scrollTop()
以确保它居中或按您希望的方式放置。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.