Web Apls第六天
1.滚动事件和加载事件
1.滚动事件
1.作用
①当页面进行滚动时触发的事件
②很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
③事件名：(scroll )
2.语法
//页面滚动事件
window.addEventListener('scroll', function (){
//执行的操作
} )
//给 window 或 document 添加 scroll 事件
2.加载事件
1.load
①加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
②事件名：load
③不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
2.语法
//页面滚动事件
window.addEventListener('load', function (){
//执行的操作
} )
//给 window 添加 load 事件
2.DOMContentLoaded
①初始的 HTML 文档解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表 、图像等完全加载
②事件名：DOMContentLoaded
2.语法
document.addEventListener('DOMContentLoaded', function(){
//执行的操作
})
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-页面加载事件的作用.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<!-- 以前写js 习惯写在head标签中 -->
<!-- <script>
// 等待标签加载完毕了，才去获取dom元素
document.addEventListener('DOMContentLoaded', function () {
const h1 = document.querySelector('h1');
console.log(h1);
h1.innerText = '我们自己修改的';
});
// js先执行，但是 dom元素还没有开始加载
</script> -->
</head>
<body>
<h1>大标题</h1>
<!-- <img
src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
alt=""
/> -->
<!--
load 作用
我希望 在h1标签上输出一张图片的高度
-->
<script>
// window.addEventListener('load', function () {
// 等待图片完全加载了 内容也回来， 才触发
// const img = document.querySelector('img');
// 获取图片标签的宽度
// console.dir(img.height); // 0 因为 代码执行到这里的时候 图片的内容还没有回来
// document.querySelector("h1").innerHTML=img.height;
// });
// 现在建议把代码 写在 </body> 上面 ， 先等待dom标签加载，然后才去获取dom元素
</script>
</body>
</html
2.元素大小和位置
1.scroll家族
1.写法
①scrollWidth (获取元素实际宽度,也就是可以滚动的距离的大小,不包含滚动条)
②scrollHeight (获取元素实际高度,也就是可以滚动的距离的大小,不包含滚动条)
③scrollLeft (获取元素被卷去的左边距离)
④scrollTop (获取元素被卷去的头部距离)
2.获取宽高
①获取元素的内容总宽高（不包含滚动条）返回值不带单位
②scrollWidth和scrollHeight
3.获取位置
①获取元素内容往左、往上滚出去看不到的距离
②scrollLeft和scrollTop
③这两个属性是可以修改的
4.语法
div.addEventListener('scroll', function(){
console.log(this.scrollT)
})
5.如图所示
6.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-scroll家族.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.scroll-dom {
width: 300px;
height: 300px;
background-color: aqua;
/* 滚动条 */
/* overflow: scroll; */
overflow-x: scroll;
/* border: 20px; */
/* 让文字不要换行 */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="scroll-dom">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
similique rerum ea dicta assumenda? Quam error eaque accusamus. Ipsa,
dicta aspernatur! Consequatur odit eos, dignissimos rem iure excepturi
commodi dicta. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Cum, possimus ab incidunt ipsum animi reprehenderit quia deserunt odit?
Laborum natus asperiores amet adipisci laudantium tempore nesciunt
blanditiis quis voluptas excepturi! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Eaque error quae, minima facilis recusandae
cumque qui sed saepe excepturi accusamus neque, illum eius perspiciatis
aliquid dicta ullam est et maiores!
</div>
<script>
/*
scrollWidth 不包含 滚动条 大小
scrollWidth 等于容器可以滚动的大小
*/
const scrollDom = document.querySelector('.scroll-dom');
// 输出它宽度高度
console.log(scrollDom.scrollWidth);
// console.log(scrollDom.scrollHeight);
// 获取当前容器滚动了的距离
scrollDom.addEventListener('scroll', function () {
// console.log(this.scrollTop);// 获取当前容器的滚动距离
console.log(this.scrollLeft); // 获取当前容器的滚动距离
});
/*
1 页面滚动 使用 window.addEventListener("scroll") 事件
2 页面的滚动距离 document.documentElement.scrollTop
1 元素滚动 dom.addEventListener("scroll")
2 获取元素滚动的距离
dom.scrollTop
dom.scrollLeft
3 scrollWidth 整个可以滚动的区间的宽度
4 scrollHeight 整个可以滚动的区域的高度
小细节 PC端的滚动条大小 17px
小细节 移动端的滚动条 不占大小
*/
</script>
</body>
</html>
2.offset家族
1.写法
①offsetWidth (获取元素自身的宽度包括边框,padding)
②offsetHeight (获取元素自身的宽度包括边框,padding)
③offsetLeft (获取元素自身带有定位的父元素的上偏移)
④offsetTop (获取元素自身带有定位的父元素的左偏移)
⑤没有定位父元素,则为body
2.获取宽高
①获取元素的自身宽高、包含元素自身设置的宽高、padding、border
②offsetWidth和offsetHeight
3.获取位置
①获取元素距离自己定位父级元素的左、上距离
② offsetLeft和offsetTop注意是只读属性
3.如图所示
4.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>07-offset家族.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.offset {
width: 300px;
height: 300px;
background-color: aqua;
overflow: scroll;
margin-left: 10px;
}
.parent{
position: fixed;
left: 400px;
top: 30px;
background-color: salmon;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="parent">
<h1>标题</h1>
<div class="offset"></div>
</div>
<script>
const offsetDom = document.querySelector('.offset');
// 获取宽度和高度 包含这滚动条的大小
console.log(offsetDom.offsetWidth);// 300
console.log(offsetDom.offsetHeight);// 300
// console.log(offsetDom.scrollWidth); // 283
// console.log(offsetDom.scrollHeight);// 283
// 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
console.log(offsetDom.offsetLeft);
console.log(offsetDom.offsetTop);
/*
总结 offset家族
1 offsetWidth 获取元素的宽度 包含这滚动条
2 offsetHeight 获取元素的高度 包含这滚动条
3 offsetLeft 获取定位了的父元素的 水平距离 左
4 offsetTop 获取定位了的父元素的 垂直距离 上
*/
</script>
</body>
</html>
3.client家族
1.写法
①clientWidth (获取元素可视区的宽度包括padding,不包含边框)
②clientHeight (获取元素可视区的宽度包括padding,不包含边框)
③clientLeft (获取元素上边框的大小)
④clientTop (获取元素上边框的大小)
2.获取宽高
①获取元素的可见部分宽高（不包含边框，滚动条等）
②clientWidth和clientHeight
3.获取位置
①获取左边框和上边框宽度
②clientLeft和clientTop 注意是只读属性
4.如图所示
4.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>08-client家族.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.client {
width: 300px;
height: 300px;
background-color: aqua;
margin: 100px auto;
overflow: scroll;
border-left: 1px solid #000;
border-right: 1px solid red;
}
</style>
</head>
<body>
<div class="client">
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<h1>21</h1>
<h1>22</h1>
<h1>23</h1>
<h1>24</h1>
<h1>25</h1>
<h1>26</h1>
<h1>27</h1>
<h1>28</h1>
<h1>29</h1>
<h1>30</h1>
<h1>31</h1>
<h1>32</h1>
<h1>33</h1>
<h1>34</h1>
<h1>35</h1>
<h1>36</h1>
<h1>37</h1>
<h1>38</h1>
<h1>39</h1>
<h1>40</h1>
<h1>41</h1>
<h1>42</h1>
<h1>43</h1>
<h1>44</h1>
<h1>45</h1>
<h1>46</h1>
<h1>47</h1>
<h1>48</h1>
<h1>49</h1>
<h1>50</h1>
<h1>51</h1>
<h1>52</h1>
<h1>53</h1>
<h1>54</h1>
<h1>55</h1>
<h1>56</h1>
<h1>57</h1>
<h1>58</h1>
<h1>59</h1>
<h1>60</h1>
<h1>61</h1>
<h1>62</h1>
<h1>63</h1>
<h1>64</h1>
<h1>65</h1>
<h1>66</h1>
<h1>67</h1>
<h1>68</h1>
<h1>69</h1>
<h1>70</h1>
<h1>71</h1>
<h1>72</h1>
<h1>73</h1>
<h1>74</h1>
<h1>75</h1>
<h1>76</h1>
<h1>77</h1>
<h1>78</h1>
<h1>79</h1>
<h1>80</h1>
<h1>81</h1>
<h1>82</h1>
<h1>83</h1>
<h1>84</h1>
<h1>85</h1>
<h1>86</h1>
<h1>87</h1>
<h1>88</h1>
<h1>89</h1>
<h1>90</h1>
<h1>91</h1>
<h1>92</h1>
<h1>93</h1>
<h1>94</h1>
<h1>95</h1>
<h1>96</h1>
<h1>97</h1>
<h1>98</h1>
<h1>99</h1>
<h1>100</h1>
</div>
<script>
const clientDom = document.querySelector('.client');
// 宽度和高度
console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）
// 获取边框的大小
console.log(clientDom.clientLeft); // 左边框
console.log(clientDom.clientRight); // 有没有？
console.log(clientDom.clientTop); // 上边框
// scollWidth 获取容器的宽度（包含滚动的区域）
// offsetWidth 获取可视区域的宽度（包含滚动条）
// clientWidth 获取可视区域的宽度（不包含滚动条）
// scrollLeft 获取左侧滚动的距离
// offsetLeft 获取和已经定位了的父级元素的左距离
// clientLeft 获取左边框的大小
</script>
</body>
</html>
