如何在div中间平滑滚动到不同的跨度
[英]How do I smooth scroll to different spans in the middle of a div
问题描述
I have a div with many spans inside of it. 
我有一个div，里面有很多跨度。 There many br's in between the spans. 跨度之间有很多br。 Each span has an id. 每个范围都有一个ID。
I am making several lines of text where each letter is in a span and each line ends with a line break to make lines of text. 我正在制作多行文本，其中每个字母都在一个跨度中，每行以换行符结尾以形成文本行。 I would like to be able to scroll to any span and place it in the middle of the parent div vertically. 我希望能够滚动到任何跨度并将其垂直放置在父div的中间。
I am able to scroll so that the correct span is always in the middle of the div (see the jsfiddle here ). 我能够滚动，以便正确的跨度始终位于div的中间（请参见jsfiddle此处 ）。 The problem is that it is not a smooth scroll. 问题在于它不是平滑滚动。 Moving from line to line can be quite jarring. 逐行移动可能会非常麻烦。
How can I make this a smooth scroll? 如何使它平滑滚动？ I can use JQuery if need be (but I would prefer not to if that is possible). 我可以在需要时使用JQuery（但我不愿意这样做）。 Remember, my goal is to have the selected span to always show up in the middle of the parent div and be able to smooth scroll from one span to another. 记住，我的目标是使选定的跨度始终显示在父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>
1 个解决方案
解决方案1
2 已采纳 2016-10-25 15:29:25
You can use the jQuery animate method by adding the following line at the end of your scroll function: 您可以通过在scroll功能的末尾添加以下行来使用jQuery animate方法：
$(scrollableContainer).animate({scrollTop: targetScrollTop}, 300);
Updated fiddle: https://jsfiddle.net/rykeemwv/4/ 更新的小提琴： https ： //jsfiddle.net/rykeemwv/4/
300 is the duration of the animation in milliseconds. 300是动画的持续时间（以毫秒为单位）。 The animation will use the jQuery default easing, but you can specify others. 该动画将使用jQuery默认缓动，但您可以指定其他缓动。 For more information check out the doc http://api.jquery.com/animate/ . 有关更多信息，请查看文档http://api.jquery.com/animate/ 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.