在Div内滚动不工作

Scrolling Inside Div Not Working?

本文关键字：工作 滚动 Div      更新时间：2023-09-26

我有一个模态，我使用按字母顺序搜索。沿着顶部，有一个带有a - z按钮的水平条。我希望每个按钮都能滚动div (overflow:auto)到合适的字母。

例如，如果用户点击"G"，它将向下滚动div到G的结果。

我想设置这些onclicks与js或jquery。以下是目前为止的内容:

$('.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);
    })
})

为什么不工作…?

EDIT: Here's a fiddle

为浮动元素添加了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/

UPDATE

你应该使用$(target).offset().top，它独立于样式的position属性。

您必须将scrollTop改为0，并减去.search-results偏移量的顶部。

更新二

如果你想在两边都做动画，而不是滚动顶部到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>

我建议您使用jquery。scrollTo插件。它是高度可定制的，支持动画，非常容易使用。您只需要将animate代码替换为以下内容:

$('.search-results').scrollTo($(target), 200);

您需要对您的代码进行一些修改，以使其按照我的理解工作。首先，需要为.search-results元素提供一些上下文。您可以通过向该元素添加position:relative来实现这一点。现在它是search__results__letter--*元素的相对父元素，您可以使用动画片段滚动到它们。但是，您还需要计算相对于父控件的偏移滚动的滚动位置。简单的数学将处理这部分，首先获得search__results__letter--*元素的滚动位置，并将其添加到.search-results的scrollTop()。您可以在下面的演示代码中看到这个方法:

$('.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://jsfiddle.net/gLpvzgu5/

相关文章：