Question

我有一个页面顶部有三个div，一个在侧面，一个内容div在左下角。内容div包含一系列div。我想要一个按钮，允许您逐步突出显示它们。但是，内容div包含的数据多于屏幕上可以容纳的数据，因此我将其放入溢出：滚动。现在，我需要确保在用户点击时内容中突出显示的div是可见的。

我尝试过这里推荐的各种技术和其他网站，但它们都滚动页面而不是内容div，这意味着我的标题和侧边栏滚动出视图。任何人都可以给我一些关于如何滚动溢出div的指针。以下是我正在做的一些简化的示例代码。

首先是HTML：

    <div id='header'>
        Header
        <input type="button" id="NextButton" value="Next" />
    </div>
    <div id='content' style="overflow: scroll">
        <div id="div1" class='highlight'> Text for div1 </div>
        <div id="div2"> Text for div2 </div>
        <div id="div3"> Text for div3 </div>
        <div id="div4"> Text for div4 </div>
        <div id="div5"> Text for div5 </div>
    </div>
</div>
<div id='sidebar' style="float:right">
    Sidebar
</div>

现在的JavaScript（显然注意它使用的是jQuery）

    var current;
    $(document).ready(function () {
        var current = $('#div1');
        $('#NextButton').click(function() {
            current.removeClass('highlight');
            current = current.next();
            current.addClass('highlight');
          // Somehow make content scroll to the top of the div#content  
        })
    });

FWIW，这是样式元素：

    .highlight { color: Red; }

正如您所看到的那样#NextButton上的点击通过div更改突出显示，但是，我还需要确保div实际上是可见的，例如将其滚动到顶部。（顺便说一句，我知道它没有检查结束，我只是为了简单起见将其剥离到最低限度。）

任何帮助都将不胜感激。

Answer 1

jQuery插件ScrollTo适用于各个元素。麻烦在于知道是否显示了元素。根据浏览器兼容性，这可能并非总是可行。您可以通过始终滚动来“欺骗”，但这对用户来说似乎有些紧张。

Answer 2

您可以使用Element.scrollTop。

如何以编程方式滚动溢出：滚动

2 个答案: