------------------------------------JS判断是否到达浏览器顶部、底部-----------------------------------------
<!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>判断是否到达浏览器顶部或底部</title>
<style>
.image-item {
width: 40%;
margin-right: 5px;
display: inline-block;
height: 350px;
width: 250px;
background: silver;
}
.beauty-list {
margin: 0 auto;
width: 560px;
height: 1200px;
}
</style>
</head>
<body>
<div class="beauty-list" id="imgList">
</div>
<script>
//ajax四个步骤
function createXHR() {
var xhr;
try {
xhr = new XMLHttpRequest();
} catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xhr = new ActiveObject("Msxml2.XMLHTTP");
} catch (e) {
alert("浏览器太老,不能使用ajax");
}
}
}
return xhr;
}
function isTopOrBottom() {
var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body
.clientHeight;
var scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
var scrollHeight = document.body.scrollHeight;
if (scrollTop + clientHeight >= scrollHeight) {
alert('触底');
//ajax加载数据
var xhr = createXHR();
xhr.open('POST', 'https://www.apiopen.top/meituApi', true);
// 3. 调用send方法, 向服务器发起请求
// 如果是post请求, 那么需要在send方法中带请求参数
// 如果是get请求, 那么参数为null
// 4. 设置请求头
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 5. 发送
xhr.send('page=1'); //请求体body,用&分隔。引用:req.body.name
// 6.监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//此时说明响应完毕 我们可以通过xml.responseText 来获取服务器的响应内容(文本内容)
// $("").html(xhr.responseText);
var res = JSON.parse(xhr.responseText);
var imgList = document.getElementById('imgList');
if (res.code == '200') {
for (var i = 0; i < res.data.length; i++) {
! function () {
var img = new Image();
img.src = res.data[i].url;
var item = document.createElement('img');
img.onload = function () {
item.src = img.src;
}
item.classList.add('image-item');
imgList.appendChild(item);
}(i);
}
}
}
};
}
if (scrollTop == 0) {
alert('滚到顶部')
}
}
window.onscroll = isTopOrBottom;
</script>
<!---------------------------------------------JQ方式---------------------------------------------------->
<script type="text/javascript">
$(window).scroll(function(){
//可视区域加载
var clientHeight = $(this).height();
var scrollTop = $(this).scrollTop();
//整个高度
var wholeHeight = $(document).height();
if(clientHeight+scrollTop>=wholeHeight){
alert(clientHeight+'|---|'+scrollTop+'<----->'+wholeHeight);
alert("到底部");
}
if(scrollTop === 0 ){
alert("到顶部");
}
});
</script>
<!----------------------------------------------结束------------------------------------------------------->
</body>
</html>
------------------------------------判断div滚动是否到底部--------------------------------------------
<!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>滚动到顶部或底部</title>
<style>
#myDiv{
width: 500px;
height: 400px;
margin: 10px auto;
overflow-y: scroll;
background-color: bisque;
}
</style>
</head>
<body>
<div class="" id="myDiv">
555555
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
555555
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
555555
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
555555
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
555555
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
555555
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<script>
var myDiv = document.getElementById("myDiv");
function isTopOrBot(){
var divTop = myDiv.scrollTop;
var divHeight = myDiv.clientHeight;
var divScrollHeight = myDiv.scrollHeight;
if(divTop + divHeight >= divScrollHeight){
alert('触底');
}
if(divTop == 0){
alert("触顶");
}
}
myDiv.onscroll = isTopOrBot;
</script>
</body>
</html>
--------------------------------------------获取滚动条宽度------------------------------------------
<!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>Document</title>
</head>
<body>
<!-- scrollbar的宽度 -->
<!-- mac系统没滚动条,为0 -->
<script>
function getScrollBar() {
var styles = {
overflowY: 'scroll',
width: '100px',
height: '100px'
},
i, clientWidth;
//创建一个p标签
var p = document.createElement('p');
for (i in styles) {
p.style[i] = styles[i];
}
document.body.appendChild(p);
//offsetWidth = clientWidth + border-width*2 + 滚动轴的宽度;
//clientWidth = style.width + padding * 2;
var scrollBarWidth = p.offsetWidth - p.clientWidth;
return scrollBarWidth;
}
getScrollBar();
//获取滚动条宽度方式2
function getScrollBar2(){
var el = document.createElement('p');
var styles = {
height:'100px',
width:'100px',
},i;
for(i in styles){
el.style[i] = styles[i];
}
document.body.append(el);
var oriClientWidth = el.clientWidth;
el.style.overflowY = 'scroll';
var newClientWidth = el.clientWidth;
alert(newClientWidth+'-------'+oriClientWidth);
var scrollBarWidth = newClientWidth - oriClientWidth;
return scrollBarWidth;
}
console.log(getScrollBar2());
</script>
</body>
</html>
<!---------------------------------JQ可视区域加载-------------------------------------------->
<!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>可视区域加载</title>
<style type="text/css">
.red {
background-color: red;
}
.beauty-list {
margin: 0 auto;
width: 560px;
height: 1200px;
}
</style>
</head>
<body>
<div class="beauty-list "></div>
<div class="hello" id="hello">Hello World.</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function isLoad(){
var ks_area = $(window).height();
var hello = $("#hello").offset().top;
var scrollTop = $(window).scrollTop();
if(ks_area + scrollTop >= hello){
// alert("触底加载");
$("#hello").addClass('red');
}
}
$(window).scroll(isLoad);
</script>
</body>
</html>