JS和jQuery宽高详解（中篇）

Posted 2020-09-07

JS实例练习

首先了解一下document.documentElement与document.body之间的小区别，这两一个元素后者是前者的子集，也就是父子关系。

 

1）可视区域计算

实现原理：div元素到窗口顶部的高度小于窗口的可视高度，则执行对div绑定的函数。 

这里获取div元素到窗口顶部的高度使用getBoundingClientRect()方法。

divTop = divId.getBoundingClientRect().top; 这个值随着滚动而变化。

 

实现的效果，div随着滚动条进入可视区域内，div添加一个动效类fadein_left：

 

JS代码：

<script>

function showDivs(){

var show_div = document.getElementById(‘show_div‘);

//window.innerHeight兼容IE9以上；clients可视区域

var clients = window.innerHeight || document.documentElement.clientHeight||document.body.clientHeight;

var divTop = show_div.getBoundingClientRect().top;//div模块距离窗口上边的高度,这个高度随着滚动在变化

//var divTop = show_div.offsetTop;

if(divTop <= clients){

show_div.classList.add(‘fadein_left‘); // 常用的是图片延迟加载，图片进入可视区域内则进行加载

}

}

window.onscroll = showDivs;

</script>

 

CSS样式

<style>

@-webkit-keyframes fadeInLeft{

0%{

opacity: 0;

-webkit-transform:translate3d(-100%,0,0);

transform:translate3d(-100%,0,0);

}

100%{

opacity: 1;

-webkit-transform:none;

transform:none;

}

}

@keyframes fadeInLeft{

0%{

opacity: 0;

-webkit-transform:translate3d(-100%,0,0);

-ms-transform:translate3d(-100%,0,0);

transform:translate3d(-100%,0,0);

}

100%{

opacity: 1;

-webkit-transform:none;

-ms-transform:none;

transform:none;

}

}

#show_div{

width: 500px;

height: 300px;

background: #f00;

margin: 1000px auto 0 auto;

}

.fadein_left{

-webkit-animation: fadeInLeft 2s;

animation: fadeInLeft 2s;

}

</style>

html:

<div id="show_div"></div>

 

2）滚动到顶部，底部的实现

实现原理：滚动条卷起的高度与可视窗口的高度的总和大于或等于文档的总高度则滚动到了底部；如果滚动到上边的高度为0则滚动到顶部。

实际使用：滚动条滚动到底部加载更多

 

JS代码：

<script>

function scrollBottomOrTop(){

var scrollDiv = document.getElementById(‘scrolldiv‘);

var scrollTop = document.body.scrollTop;

var wholeHeight = document.body.scrollHeight;

var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

console.log(scrollTop);

console.log(wholeHeight);

 

if(scrollTop==0){

alert("滚动到顶部了");

}

if(wholeHeight <= scrollTop+clients){

alert(‘滚动到底部了哦～～‘);

}

}

window.onscroll = scrollBottomOrTop;

</script>

 

CSS样式：

<style>

.scrolldiv{

width: 500px;

height: 400px;

background: #f00;

margin: 1000px auto 0 auto;

}

</style>

 

html代码：

<div class="scrolldiv" id="scrolldiv"></div>

 

3）滚动条的计算

实现原理：1. div元素offsetWidth的宽度与clientWidth的宽度差；

         2. div元素没有滚动条是clientWidth与有滚动条时clientWidth

 

JS代码：

<script>

//mac版滚动条不占宽度，window下是有宽度的

function getScrollBar(){

var el = document.createElement("p");

var myText = document.createTextNode("这里除了说明计算滚动条的宽度，还说明使用JS创建一个元素，以及向元素中添加内容。");

var styles={

width:"100px",

height:"100px",

overflowY:"scroll"

},i,scrollBarWidth;

for(i in styles){

el.style[i] = styles[i]

}

document.body.appendChild(el);

el.appendChild(myText);

var scrollBarWidth = el.offsetWidth - el.clientWidth;

//console.log(el.offsetWidth);

//console.log(el.clientWidth);

//el.remove();

return scrollBarWidth;

}

console.log(getScrollBar());

</script>

第二种方法就不实现了啦啦啦～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

 

JS相关宽高实例就到此为止，下一篇就是jQuery相关的宽高喽～～～～