------------------------------------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>