[英]Scrolling a DIV to Specific Location
There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.周围有很多类似的问题,但似乎没有一个在寻找我正在寻找的问题,或者没有一个答案对我的目的有用。
The jsfiddle: http://jsfiddle.net/tumblingpenguin/9yGCf/4/ jsfiddle: http : //jsfiddle.net/tumblingpenguin/9yGCf/4/
The user will select an option and the page will reload with their option applied.用户将选择一个选项,页面将重新加载并应用他们的选项。 What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.
我需要的是将“选项列表”DIV 向下滚动到所选选项,使其位于选项列表的中心。
The HTML... HTML...
<div id="container">
<a href="#">
<div class="option">
Option 1
</div>
</a>
<!-- other options -->
<a href="#">
<div class="option selected"> <!-- scroll to here -->
Option 4
</div>
<!-- other options -->
<a href="#">
<div class="option">
Option 7
</div>
</a>
</div>
The selected option is marked with the selected
class.所选选项标有
selected
类别。 I need to somehow scroll the DIV down to the selected
option.我需要以某种方式将 DIV 向下滚动到
selected
选项。
The CSS... CSS...
#container {
background-color: #F00;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
}
a {
color: #FFF;
text-decoration: none;
}
.option {
background-color: #c0c0c0;
padding: 5px;
width: 200px;
}
.option:hover {
background-color: #ccc;
}
.selected {
background-color: #3c6;
}
I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.我在其他网站上看到过这样做,所以我知道这是可能的——我只是不知道从哪里开始。
PS jQuery solutions are acceptable. PS jQuery 解决方案是可以接受的。
Something like this http://jsfiddle.net/X2eTL/1/ :像这样的http://jsfiddle.net/X2eTL/1/ :
// On document ready
$(function(){
// Find selected div
var selected = $('#container .selected');
// Scroll container to offset of the selected div
selected.parent().parent().scrollTop(selected[0].offsetTop);
});
Without the jQuery (put this at the bottom of the < body > tag:没有 jQuery(把它放在 <body> 标签的底部:
// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;
demo: http://jsfiddle.net/66tGt/演示: http : //jsfiddle.net/66tGt/
Since you said JQuery answers are acceptable, here's an example of what you're looking for:由于您说 JQuery 答案是可以接受的,以下是您要查找的示例:
$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);
Replace div for whatever element you want to scroll to.将 div 替换为您要滚动到的任何元素。
Here is one possible solution that may work for you:这是一种可能对您有用的解决方案:
JS: JS:
$('#container').scrollTop( $('.selected').position().top );
Take a look at this fiddle : http://jsfiddle.net/9yGCf/8/看看这个小提琴: http : //jsfiddle.net/9yGCf/8/
As requested it scrolls to the middle of the div (you can change the offset by however much you want to make little adjustments).根据要求,它会滚动到 div 的中间(您可以随意更改偏移量,只需稍作调整即可)。 I would probably suggest setting either a line height with some padding and whatnot and then do the math to change the offset that I have at
-40
so that it does put it in the middle.我可能会建议设置带有一些填充和诸如此类的行高,然后进行数学运算以更改我在
-40
处的偏移量,以便将其放在中间。
But I used jquery and came up with this quick little code... also added some code to change the selected option但是我使用了 jquery 并想出了这个快速的小代码......还添加了一些代码来更改所选选项
$('.option').click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
$(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});
This magical API will automatically scroll to the right position.这个神奇的 API 会自动滚动到正确的位置。
element.scrollIntoView({ block: 'center' })
See more details:查看更多详情:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.