1
div 안에 여러 스팬이있는 div가 있습니다. 스팬 사이에는 많은 br이 있습니다. 각 범위에는 ID가 있습니다.div 중간에 다른 스팬으로 스크롤하는 방법
각 줄이 한 줄에 있고 각 줄이 줄 바꿈으로 끝나는 여러 줄의 텍스트를 만들어 텍스트 줄을 만듭니다. 어떤 범위로 스크롤하여 부모 div의 중간에 수직으로 배치하고 싶습니다.
정확한 span이 항상 div의 중간에 오도록 스크롤 할 수 있습니다 (jsfiddle here 참조). 문제는 부드러운 스크롤이 아니라는 것입니다. 라인마다 이동하는 것은 꽤 힘들 수 있습니다.
어떻게하면 부드럽게 스크롤 할 수 있습니까? 필요한 경우 JQuery를 사용할 수 있습니다 (그러나 가능하면 불가능). 내 목표는 선택된 span이 항상 부모 div의 중간에 나타나고 한 span에서 다른 span으로 스크롤을 부드럽게 할 수 있다는 것을 기억하십시오.
<!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>