在分区内滚动不起作用？
我有一个按字母顺序搜索的模式。在顶部，有一个带有A按钮的水平条.我希望这些按钮中的每一个都能滚动div (带溢出:auto)到相应的字母。
例如，如果用户单击"G"，它将向下滚动到G结果。
我想用js或jquery设置这些onclick。到目前为止，我的情况如下：
$('.search__strip__letter').each(function () {
var number = $(this).data('letter');
$(this).click(function () {
var target = '#search__results__letter--'+number;
$('.search-results').animate({scrollTop:$(target).position().top}, 200);
})
})为什么这不管用.？
编辑： 这里有把小提琴。
回答 4
Stack Overflow用户
发布于 2015-10-06 13:47:20
更新
您应该使用$(target).offset().top，它独立于样式的position属性工作。
您必须scrollTop到0并减去.search-results偏移量的顶部。
更新II
如果您想为双方动画，而不是scrollingTop到0，您必须得到当前的scrollTop和它的总和，看看下面：
[].forEach.call('ABCDEFGHIJKLMNOPQRSTUVWXYZ', function(l, i) {
var a = document.createElement('a');
a.textContent = l;
a.addEventListener('click', function(e) {
var target = '#search__results__letter--' + i;
var now = $('.search-results').scrollTop();
$('.search-results').animate({ scrollTop: $(target).offset().top - $('.search-results').offset().top + now }, 200);
});
document.getElementById('letters').appendChild(a);
var div = document.createElement('div');
div.id = 'search__results__letter--' + i;
div.textContent = 'Letter ' + l;
document.querySelector('.search-results').appendChild(div);
});#letters a {
display: inline-block;
width: 25px;
height: 25px;
background-color: darkblue;
margin: 2px;
line-height: 25px;
text-align: center;
color: white;
font-family: Verdana;
cursor: pointer;
}
.search-results {
height: 120px;
overflow-y: auto;
}
.search-results div {
height: 100px;
background-color: aqua;
margin: 2px;
font-family: Verdana;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="letters">
</div>
<div class="search-results">
</div>
Stack Overflow用户
发布于 2015-10-06 14:48:04
在浮动元素上添加了clearfix类，更新了jquery选择器拼写，在这里修复。$('.search__strip__letter').each(function () { var number = $(this).data('letter'); $(this).click(function () { console.log('click'); var target = '#search__results__letter--' + number; console.log(target,$('.search-results')); $('.search-results').animate({ scrollTop: $(target).offset().top + 100 }, 200); }) })
http://jsfiddle.net/Aerious/z17nyh2s/8/
Stack Overflow用户
发布于 2015-10-06 14:13:25
按照我的理解，您需要对代码进行一些修改才能使其工作。首先，您需要为.search-results元素提供一些上下文。您可以通过向该元素添加position:relative来做到这一点。现在它是您的search__results__letter--*元素的相对父元素，您可以使用动画片段滚动到它们。但是，还需要计算相对于父滚动的偏移量的滚动位置。简单的数学将通过首先获得search__results__letter--*元素的滚动位置并将其添加到scrollTop() of .search-results来处理该部分。您可以在下面的演示代码中看到此方法：
$('.search__strip__letter').each(function () {
var number = $(this).data('letter');
$(this).on('click', function () {
var target = '#search__results__letter--'+number;
var currentPosition = $('.search-results').scrollTop();
$('.search-results').animate({scrollTop:currentPosition + $(target).position().top}, 200);
})
}).search-results {
border: 1px solid;
height: 100px;
overflow: auto;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" class="search__strip__letter" data-letter="A">A</a></li>
<li><a href="#" class="search__strip__letter" data-letter="B">B</a></li>
<li><a href="#" class="search__strip__letter" data-letter="C">C</a></li>
<li><a href="#" class="search__strip__letter" data-letter="D">D</a></li>
<li><a href="#" class="search__strip__letter" data-letter="E">E</a></li>
<li><a href="#" class="search__strip__letter" data-letter="F">F</a></li>
</ul>
<div class="search-results">
<p id="search__results__letter--A">Search Results A</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--B">Search Results B</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--C">Search Results C</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--D">Search Results D</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--E">Search Results E</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--F">Search Results F</p>
</div>
编辑：
我用我的代码改编了原海报的小提琴。我必须做的一个补充是通过在类上创建一个新的.search__results__letter来迫使该块格式上下文返回到流中。我通过添加display:inline-block;width:100%;、添加overflow:hidden;或overflow:auto;来完成同样的任务。另外，请参阅块格式上下文上的MDN文档以获得强制执行它的其他方法。
https://stackoverflow.com/questions/32971598
复制相似问题
腾讯云开发者
