个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 15:44:44 25 4
gpt4 key购买 nike

我有一个 div，里面有很多 span。跨度之间有许多 br。每个 span 都有一个 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>

最佳答案

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

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

更新 fiddle :https://jsfiddle.net/rykeemwv/4/

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

关于javascript - 如何平滑滚动到 div 中间的不同跨度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40243455/

25 4 0
文章推荐： javascript - ajax() 考虑值 null jQuery
文章推荐： c# - 在 C# 中编码(marshal)带有指针参数的方法指针
文章推荐： c# - STA 线程异常传播
文章推荐： c - OpenMP 如何将循环划分为线程？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com