Question

我有一个内部有很多跨度的div。在跨度之间有许多br。每个跨度都有一个id。

我正在制作几行文字，其中每个字母都在一个范围内，每行以换行符结尾以生成文本行。我希望能够滚动到任何跨度并将其垂直放置在父div的中间。

我可以滚动，以便正确的范围始终位于div的中间（请参阅jsfiddle here）。问题是它不是一个平滑的滚动。从一行到另一行的移动可能非常不和谐。

如何让它成为流畅的卷轴？如果需要，我可以使用JQuery（但我不愿意，如果可能的话）。请记住，我的目标是让选定的跨度始终显示在父div的中间，并能够平滑地从一个跨度滚动到另一个跨度。

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #theDiv {
                height: 75px;
                width: 100px;
                overflow: auto;
            }
        </style>

        <script>
        function scroll() {

            //the user supplied span id
            var spanId = document.querySelector("#rowColInput").value;

            //get the span where we want to scroll to
            var codeElement = document.querySelector("#" + spanId);

            //get the container and owner of the scroll bars
            var scrollableContainer = document.querySelector("#theDiv");

            //get the height of the owner of the scrollbars, #theDIv
            var scrollableContainerHeight = scrollableContainer.clientHeight;

            //get the distance from the top edge of the parent, scrollableContainer,
            var offsetTop = codeElement.offsetTop

            //get the amount of pixels that the element is underneath the scrollableContainer's height
            var diff = offsetTop - scrollableContainerHeight;

            //scroll so that the span is in the middle of the div
            scrollableContainer.scrollTop = diff + (scrollableContainerHeight / 2);                
        }
    </script>
</head>
<body>
    <div id="theDiv">
        <span id="r1c1">l</span><span id="r1c2">i</span><span id="r1c3">n</span><span id="r1c4">e</span><span id="r1c5"> </span><span id="r1c6">1</span><br/>
        <span id="r2c1">l</span><span id="r2c2">i</span><span id="r2c3">n</span><span id="r2c4">e</span><span id="r2c5"> </span><span id="r2c6">2</span><br/>
        <span id="r3c1">l</span><span id="r3c2">i</span><span id="r3c3">n</span><span id="r3c4">e</span><span id="r3c5"> </span><span id="r3c6">3</span><br/>
        <span id="r4c1">l</span><span id="r4c2">i</span><span id="r4c3">n</span><span id="r4c4">e</span><span id="r4c5"> </span><span id="r4c6">4</span><br/>
        <span id="r5c1">l</span><span id="r5c2">i</span><span id="r5c3">n</span><span id="r5c4">e</span><span id="r5c5"> </span><span id="r5c6">5</span><br/>
        <span id="r6c1">l</span><span id="r6c2">i</span><span id="r6c3">n</span><span id="r6c4">e</span><span id="r6c5"> </span><span id="r6c6">6</span><br/>
        <span id="r7c1">l</span><span id="r7c2">i</span><span id="r7c3">n</span><span id="r7c4">e</span><span id="r7c5"> </span><span id="r7c6">7</span><br/>
        <span id="r8c1">l</span><span id="r8c2">i</span><span id="r8c3">n</span><span id="r8c4">e</span><span id="r8c5"> </span><span id="r8c6">8</span><br/>
        <span id="r9c1">l</span><span id="r9c2">i</span><span id="r9c3">n</span><span id="r9c4">e</span><span id="r9c5"> </span><span id="r9c6">9</span><br/>
        <span id="r10c1">l</span><span id="r10c2">i</span><span id="r10c3">n</span><span id="r10c4">e</span><span id="r10c5"> </span><span id="r10c6">10</span><br/>
        <span id="r11c1">l</span><span id="r11c2">i</span><span id="r11c3">n</span><span id="r11c4">e</span><span id="r11c5"> </span><span id="r11c6">11</span><br/>
        <span id="r12c1">l</span><span id="r12c2">i</span><span id="r12c3">n</span><span id="r12c4">e</span><span id="r12c5"> </span><span id="r12c6">12</span><br/>
        <span id="r13c1">l</span><span id="r13c2">i</span><span id="r13c3">n</span><span id="r13c4">e</span><span id="r13c5"> </span><span id="r13c6">13</span><br/>
        <span id="r14c1">l</span><span id="r14c2">i</span><span id="r14c3">n</span><span id="r14c4">e</span><span id="r14c5"> </span><span id="r14c6">14</span><br/>
        <span id="r15c1">l</span><span id="r15c2">i</span><span id="r15c3">n</span><span id="r15c4">e</span><span id="r15c5"> </span><span id="r15c6">15</span><br/>
        <span id="r16c1">l</span><span id="r16c2">i</span><span id="r16c3">n</span><span id="r16c4">e</span><span id="r16c5"> </span><span id="r16c6">16</span><br/>
        <span id="r17c1">l</span><span id="r17c2">i</span><span id="r17c3">n</span><span id="r17c4">e</span><span id="r17c5"> </span><span id="r17c6">17</span><br/>
        <span id="r18c1">l</span><span id="r18c2">i</span><span id="r18c3">n</span><span id="r18c4">e</span><span id="r18c5"> </span><span id="r18c6">18</span><br/>
        <span id="r19c1">l</span><span id="r19c2">i</span><span id="r19c3">n</span><span id="r19c4">e</span><span id="r19c5"> </span><span id="r19c6">19</span><br/>
        <span id="r20c1">l</span><span id="r20c2">i</span><span id="r20c3">n</span><span id="r20c4">e</span><span id="r20c5"> </span><span id="r20c6">20</span><br/>

    </div>

    <input type="text" placeholder="Enter in a span id like r10c1" id="rowColInput"></input>
    <input type="submit" onclick="scroll()"/> 
</body>
</html>

Answer 1

您可以通过在animate函数末尾添加以下行来使用jQuery scroll方法：

$(scrollableContainer).animate({scrollTop: targetScrollTop}, 300);

更新了小提琴：https://jsfiddle.net/rykeemwv/4/

300是动画的持续时间（以毫秒为单位）。动画将使用jQuery默认缓动，但您可以指定其他。有关详细信息，请查看文档http://api.jquery.com/animate/。

如何在div中间平滑滚动到不同的跨度

1 个答案: