스크롤Top 사용방법_기본지식

아래 데모에서 외부 요소의 높이 값은 200px이고 내부 요소의 높이 값은 300px입니다. 분명히 "외부 요소의 내용"은 "외부 요소" 자체보다 높습니다. 스크롤 막대를 아래로 드래그하면 내용의 일부가 "외부 요소의 위쪽 경계" 외부에 숨겨지고 scrollTop은 동일합니다. 이 "보이지 않는 콘텐츠"의 높이입니다.
데모: (스크롤 막대를 드래그하면 scrollTop 값의 변화를 볼 수 있습니다.)
이러한 텍스트는 내부 요소에 표시됩니다.
scrollTop 값은

입니다. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 텍스트가 내부 요소에 나타납니다. </div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

설명 :
내부 레이어 요소의 높이 값이 300px입니다. > 외부 요소의 높이 값이 200px이므로 "외부 요소의 내용"(즉, "내부 요소")이 ​​완전히 표시되지 않습니다. 그리고 바깥쪽 요소는 Overflow가 자동으로 설정되어 있어서 바깥쪽 요소의 오른쪽에 상하 슬라이딩 바가 나타나게 됩니다
초기 상태에서는 "내부 요소의 위쪽 경계선"과 "상단 요소"가 "바깥쪽 요소의 경계"가 서로 일치하고 "외부 요소의 위쪽 경계선"을 초과하는 내용이 없으면 이때 scrollTop 속성의 값은 0입니다.
스크롤 막대를 아래쪽으로 드래그하면 "외부 요소의 상한"을 초과하는 내용이 점차 증가하며, 이 초과된 부분만큼 scrollTop 값이 동일해집니다.
스크롤바를 아래쪽으로 드래그하면 "내부 요소의 하단 테두리"와 "외부 요소의 하단 테두리"가 일치하고, 내용의 높이가 "외부 요소의 상단 테두리"를 초과합니다. = 300px-200px= 100px, 이때의 scrollTop 값입니다.
js 코드를 읽고 scrollTop의 값을 씁니다
참고: scrollTop의 사용법은 element.style.scrollTop이 아니라 element.scrollTop입니다.
js 코드를 통해 scrollTop의 값을 읽습니다
위에서 데모 예제에서는 실제로 scrollTop의 읽기 작업이 사용되었습니다. 구체적으로 스크롤바를 드래그하는 과정에서 이때의 scrollTop 값을 읽어서 아래 텍스트로 표시하게 됩니다.
위 데모 예제의 전체 원본 코드:

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素"> 텍스트가 내부 요소에 나타납니다. </div> </div> <p>scrollTop 값은 <span id="演示元素scrollTop的值"></span></p>입니다.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

설명 :
"외부 요소의 스크롤바"를 드래그하면 onscroll 이벤트가 발생합니다. scrollTop의 값을 읽어서 표시하는 이 이벤트의 이름을 딴 핸들러 함수를 등록하세요
scrollTop의 값을 읽어서 표시하는 이벤트 핸들러 함수에서 "외부 요소"는 외부 요소인 _div.scrollTop을 통해 얻습니다. 해당 시점의 scrollTop 값이 페이지에 표시됩니다.
js 코드를 통해 scrollTop의 값을 설정합니다.
위 데모 예시를 일부 수정합니다. 기능 추가: js 문을 통해 scrollTop 값 설정
예:
이러한 텍스트는 내부 요소에 표시됩니다.
scrollTop 값:
scrollTop을 50으로 설정 ScrollTop을 500으로 설정
scrollTop의 값 입력: OK
위 데모 예제의 전체 원본 코드:

<div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素A"> <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素A"> </div> 텍스트가 내부 요소에 나타납니다. </div> <script type="text/javascript"> var 外层元素_div = document.getElementById("外层元素"); 外层元素_div.onscroll=读取scrollTop的值并显示出来; ////注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 var span_演示元素scrollTop的值 = document.getElementById("演示元素scrollTop的值"); //onscroll事件的处理函数 function 读取scrollTop的值并显示出来() {span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop; //读取"外层元素"此时的scrollTop的值并显示出来 } 读取scrollTop的值并显示出来(); //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 </script> <p>scrollTop值是：<span id="外层元素A的scrollTop的值"></span></p> <p><button type="button" onclick="div_外层元素A.scrollTop=50;">把scrollTop设为50</button> <button type="button" onclick="div_外层元素A.scrollTop=500;">把scrollTop设为500</button> </p> <p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value=""> <button type="button" onclick="设置scrollTop的值()" name="设置scrollTop的值">确定</button> </p> <script type="text/javascript"> var div_外层元素A = document.getElementById("外层元素A"); div_外层元素A.onscroll=读取scrollTop的值并显示出来; //注册onscroll事件处理函数。当拖动滚动条时，会产生onscroll事件 var span_外层元素A的scrollTop的值 = document.getElementById("外层元素A的scrollTop的值"); //onscroll事件的处理函数 function 读取scrollTop的值并显示出来() {span_外层元素A的scrollTop的值.innerHTML=div_外层元素A.scrollTop; //读取"外层元素"此时的scrollTop的值并显示出来 } 读取scrollTop的值并显示出来(); //页面加载完成后，执行一次此函数。显示最初的scrollTop值，此时的值为0 div_外层元素A.scrollTop = 10; //通过js语句来设置scrollTop的值,本条语句会触发onscroll事件，使得"读取scrollTop的值并显示出来"函数执行一次。 function 设置scrollTop的值() { if("" != document.getElementById("输入scrollTop的值").value) div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value; else alert("请输入一个数值"); }</script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

解释：
形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件，使得读取scrollTop的值并显示出来函数执行一次
上一个例子中已经提到：当拖动滚动条到最底部时，scrollTop=300px-200px=100px，这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时，scrollTop会自动把它转变为100。例如上面的“把scrollTop设为500”按钮，scrollTop会把500转变为100。
得到body元素的scrollTop
body元素的scrollTop是超出“浏览器窗口上边界”的内容的高度
当html文档头部包含有“文档类型声明”时，需要用document.documentElement.scrollTop获得正确的值，而document.body.scrollTop的值为0

复制代码 代码如下:

当html文档头部不包含任何“文档类型声明”时，需要用document.body.scrollTop获得正确的值，而document.documentElement.scrollTop的值为0
下面定义的get_scrollTop_of_body()方法可以处理这种差异

复制代码 代码如下:

function get_scrollTop_of_body(){
var scrollTop;
if(typeof window.pageYOffset != 'undefined'){
scrollTop = window.pageYOffset;
}
else
if(typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat'){
scrollTop = document.documentElement.scrollTop;
}
else
if(typeof document.body != 'undefined'){
scrollTop = document.body.scrollTop;
}
return scrollTop;
}