1.监听页面滚动事件
window.onscroll = function() {}
window.onscroll = function(){
// 打印网页的滚动位置/坐标, 要用html调用
console.log(html.scrollTop, html.scrollLeft)
// 需求: 如何判断网页滚动到底? 课堂练习
// 网页滚动距离 + 显示窗口高度 == 网页总高度 说明触底
// 由于scroll事件触发会滚动多个像素触发一次, 所以判断刚好相等不一定成立
// console.log(html.scrollTop, html.clientHeight, html.offsetHeight)
if(html.scrollTop + html.clientHeight == html.offsetHeight){
console.log("网页触底1")
}
// 判断网页滚动到距离底部不到10px,说明触底
// 网页滚动距离 + 显示窗口高度 >= 网页总高度 - 10
if(html.scrollTop + html.clientHeight >= html.offsetHeight - 5){
console.log("网页触底2")
}
}2.修改当前的滚动距离/滚动位置
html.scrollTop = 300;
window.scroll(), window.scrollTo(), window.scrollBy()
window.scrollByLines(), window.ScrollByPages(), element.scrollIntoView()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM滚动</title>
<style>
aside{
position: fixed;
right: 50px;
top: 50px;
}
*{
/* 过度只能对有中间值的样式起效 */
transition: 1s;
}
html{
/* 设置滚动行为为平滑滚动, 可以显示网页滚动过程 */
scroll-behavior: smooth;
}
</style>
</head>
<body>
<div>
<h1 id="h1">1</h1>
<h1 id="h2">2</h1>
<h1 id="h3">3</h1>
<h1 id="h4">4</h1>
<h1 id="h5">5</h1>
<h1 id="h6">6</h1>
<h1 id="h7">7</h1>
<h1 id="h8">8</h1>
<h1 id="h9">9</h1>
<h1 id="h10">10</h1>
<h1 id="h11">11</h1>
<h1 id="h12">12</h1>
<h1 id="h13">13</h1>
<h1 id="h14">14</h1>
<h1 id="h15">15</h1>
<h1 id="h16">16</h1>
<h1 id="h17">17</h1>
<h1 id="h18">18</h1>
<h1 id="h19">19</h1>
<h1 id="h20">20</h1>
<h1 id="h21">21</h1>
<h1 id="h22">22</h1>
<h1 id="h23">23</h1>
<h1 id="h24">24</h1>
<h1 id="h25">25</h1>
<h1 id="h26">26</h1>
<h1 id="h27">27</h1>
<h1 id="h28">28</h1>
<h1 id="h29">29</h1>
<h1 id="h30">30</h1>
<h1 id="h31">31</h1>
<h1 id="h32">32</h1>
<h1 id="h33">33</h1>
<h1 id="h34">34</h1>
<h1 id="h35">35</h1>
<h1 id="h36">36</h1>
<h1 id="h37">37</h1>
<h1 id="h38">38</h1>
<h1 id="h39">39</h1>
<h1 id="h40">40</h1>
<h1 id="h41">41</h1>
<h1 id="h42">42</h1>
<h1 id="h43">43</h1>
<h1 id="h44">44</h1>
<h1 id="h45">45</h1>
<h1 id="h46">46</h1>
<h1 id="h47">47</h1>
<h1 id="h48">48</h1>
<h1 id="h49">49</h1>
<h1 id="h50">50</h1>
<h1 id="h51">51</h1>
<h1 id="h52">52</h1>
<h1 id="h53">53</h1>
<h1 id="h54">54</h1>
<h1 id="h55">55</h1>
<h1 id="h56">56</h1>
<h1 id="h57">57</h1>
<h1 id="h58">58</h1>
<h1 id="h59">59</h1>
<h1 id="h60">60</h1>
<h1 id="h61">61</h1>
<h1 id="h62">62</h1>
<h1 id="h63">63</h1>
<h1 id="h64">64</h1>
<h1 id="h65">65</h1>
<h1 id="h66">66</h1>
<h1 id="h67">67</h1>
<h1 id="h68">68</h1>
<h1 id="h69">69</h1>
<h1 id="h70">70</h1>
<h1 id="h71">71</h1>
<h1 id="h72">72</h1>
<h1 id="h73">73</h1>
<h1 id="h74">74</h1>
<h1 id="h75">75</h1>
<h1 id="h76">76</h1>
<h1 id="h77">77</h1>
<h1 id="h78">78</h1>
<h1 id="h79">79</h1>
<h1 id="h80">80</h1>
<h1 id="h81">81</h1>
<h1 id="h82">82</h1>
<h1 id="h83">83</h1>
<h1 id="h84">84</h1>
<h1 id="h85">85</h1>
<h1 id="h86">86</h1>
<h1 id="h87">87</h1>
<h1 id="h88">88</h1>
<h1 id="h89">89</h1>
<h1 id="h90">90</h1>
<h1 id="h91">91</h1>
<h1 id="h92">92</h1>
<h1 id="h93">93</h1>
<h1 id="h94">94</h1>
<h1 id="h95">95</h1>
<h1 id="h96">96</h1>
<h1 id="h97">97</h1>
<h1 id="h98">98</h1>
<h1 id="h99">99</h1>
<h1 id="h100">100</h1>
</div>
<aside>
<button id="btn1">滚动到300px的位置</button> <br><br>
<button id="btn2">滚动到600px的位置</button> <br><br>
<button id="btn3">滚动到900px的位置</button> <br><br>
<button id="btn4">向下滚动100px</button> <br><br>
<button id="btn5">向下滚动一行</button> <br><br>
<button id="btn6">向下滚动一页</button> <br><br>
<button id="btn7">滚动到h66的位置</button> <br><br>
</aside>
<script>
var html = document.documentElement;
var body = document.body;
// 1, 监听页面滚动事件
window.onscroll = function(){
// 打印网页的滚动位置/坐标, 要用html调用
console.log(html.scrollTop, html.scrollLeft)
// 需求: 如何判断网页滚动到底? 课堂练习
// 网页滚动距离 + 显示窗口高度 == 网页总高度 说明触底
// 由于scroll事件触发会滚动多个像素触发一次, 所以判断刚好相等不一定成立
// console.log(html.scrollTop, html.clientHeight, html.offsetHeight)
if(html.scrollTop + html.clientHeight == html.offsetHeight){
console.log("网页触底1")
}
// 判断网页滚动到距离底部不到10px,说明触底
// 网页滚动距离 + 显示窗口高度 >= 网页总高度 - 10
if(html.scrollTop + html.clientHeight >= html.offsetHeight - 5){
console.log("网页触底2")
}
}
// 2, 修改当前的滚动距离/滚动位置
btn1.onclick = function(){
// 直接设置网页滚动位置, 属性赋值数字, 单位默认px
html.scrollTop = 300;
}
btn2.onclick = function(){
// 水平垂直滚动, 滚动到水平0; 垂直500px的位置, 不加单位px
window.scroll(0, 600)
}
btn3.onclick = function(){
// scrollTo()和scroll()用法相同都是滚动到指定位置
window.scrollTo(0, 900)
}
btn4.onclick = function(){
// 在原有的位置处继续滚动一段距离
window.scrollBy(0, 100)
}
btn5.onclick = function(){
// 按行滚动, 参数是行数, 1表示普通文字的行高 (谷歌不支持这个API)
window.scrollByLines(1)
}
btn6.onclick = function(){
// 按页滚动, 参数是页数, 1页表示显示区域高度 (谷歌不支持这个API)
window.scrollByPages(1)
}
btn7.onclick = function(){
// 获得h66在网页上的纵坐标, 然后让网页滚动到纵坐标这个位置
// html.scrollTop = h66.offsetTop
// 也可以使用scrollIntoView使一个元素直接滚动到网页顶部
h66.scrollIntoView()
}
/* 总结: 使网页滚动的方式
html.scrollTop
window.scroll()
window.scrollTo()
window.scrollBy()
window.scrollByLines()
window.scrollByPages()
elememt.scrollIntoView()
*/
</script>
</body>
</html>
1992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
