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

Question

我有一个div，里面有很多跨度。 跨度之间有很多br。 每个范围都有一个ID。

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

我能够滚动，以便正确的跨度始终位于div的中间（请参见jsfiddle此处）。 问题在于它不是平滑滚动。 逐行移动可能会非常麻烦。

如何使它平滑滚动？ 我可以在需要时使用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

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

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

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

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

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-10-25 15:29:25

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-10-25 15:29:25

解决方案1
2 已采纳 2016-10-25 15:29:25