1
divの中にスパンが多いdivがあります。スパンの間には多くのbrがあります。各スパンにはIDがあります。divの途中で異なるスパンにスクロールするにはどうすればいいですか
私は、各文字がスパン内にあり、各行がテキスト行を作るために改行で終わる複数の行のテキストを作成しています。私は任意のスパンにスクロールし、それを親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>