Question

我发帖是因为到目前为止我找不到任何解决方案。

我已经实现了我自己的代码作为解决方案，但我想知道是否有任何更好的方法。

场景： div 标记的列表包含在父 div 标记中，其中显示了滚动条以滚动通过 divs 列表。

目标：目标是在滚动时突出显示滚动条下一个/最接近滚动条的 div 标记。

以下是该方案的 HTML 代码：

<div id="main">
    <div id="container">
        <div>Text 1</div>
        <br/>
        <div>Text 2</div>
        <br/>
        <div>Text 3</div>
        <br/>
        <div>Text 4</div>
        <br/>
        <div>Text 5</div>
        <br/>
        <div>Text 6</div>
        <br/>
        <div>Text 7</div>
        <br/>
        <div>Text 8</div>
        <br/>
        <div>Text 9</div>
        <br/>
        <div>Text 10</div>
        <br/>
    </div>
</div>

CSS 代码：

#main {
    width:100px;
    height:100px;
    overflow-y:auto;
}

请注意：

当滚动条位于顶部时，应突出显示第一个 div 。
当滚动条位于中间时，应突出显示中间的 div 。
当滚动条位于底部时，最后一个 div 应突出显示

Here is a JSFiddle for the above code

Answer 1

You have to do a couple of things.

1)listen when the scrolling stops
2)find the "closest" container
3)scroll to its top value, without triggering "the scroll end detection"

var items = $(".item");
var animating = false;

$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
    $.data(this, 'scrollTimer', setTimeout(function() {
        items.each(function(key, value) {
            if ($(value).offset().top > $(window).scrollTop()) {
                animating = true;
        $('body').animate( { scrollTop: $(value).offset().top + 'px'}, 250);
                setTimeout(function() { animating = false; }, 300);
                return false;
            }
        });
    }, 200));
}

}）;

Answer 2

这是我可能的解决方案 - 可能看起来有点复杂，但实际上非常简单。在开始收听滚动位置之前，您需要建立：

可滚动<div>父级中每个#main元素的相对位置。这是通过使用顶部的偏移量及其高度来计算的，因此我们使用元素的下边框作为基准。
#main父级的可滚动高度。

您可能希望在布局更改，DOM操作等方面重新计算这些值，但为了简单起见，我现在将其排除在外。

完成后，您将必须侦听滚动事件，然后确定父元素的相对滚动位置（值）。完成后，您会发现下一个直接div鞋的相对位置（参见第1点）超出了值，您将突出显示它。

// Get scrollable height and 
// You might want to perform this computation within event handlers that are triggered by: window resize, element resize, DOM manipulation, because scrollable height will change
var	scrollableHeight = $('#main')[0].scrollHeight - $('#main').height();
$('#container div').each(function() {
    $(this).data('relPos', ($(this).position().top + $(this).height()) / $('#main')[0].scrollHeight);
});

// Listen to scorll event
$('#main').scroll(function() {
  
    // Get absolute scroll position
    var absScrPos = $(this).scrollTop();
    
    // Get relative scroll position
    var relScrPos = absScrPos/scrollableHeight;
    
    // Highlight the correct div
    $(this).find('#container > div')
    .removeClass('highlight')
    .filter(function() {
        return parseFloat($(this).data('relPos')) > relScrPos;
    })
    .first()
    .addClass('highlight');
});

#main {
    width:100px;
    height:100px;
    overflow-y:auto;
}
.highlight {
    background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="container">
        <div>Text 1</div>
        <br/>
        <div>Text 2</div>
        <br/>
        <div>Text 3</div>
        <br/>
        <div>Text 4</div>
        <br/>
        <div>Text 5</div>
        <br/>
        <div>Text 6</div>
        <br/>
        <div>Text 7</div>
        <br/>
        <div>Text 8</div>
        <br/>
        <div>Text 9</div>
        <br/>
        <div>Text 10</div>
    </div>
</div>

突出显示div列表中最靠近滚动条的div

2 个答案: