zoukankan html css js c++ java

js/jq宽高的理解与运用

document：
1. 与client相关的宽高
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

2. 与offset相关的宽高

3. 与scroll相关的宽高

网页滚动到顶部或底部：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    
<script>
function scrollBottomOrTop() {
    var clients = window.innerHeight || document.documentElement.clientHeight
    || document.body.clientHeight;
    var scrollTop = document.body.scrollTop;
    var wholeHeight = document.body.scrollHeight;
    if(clients+scrollTop>=wholeHeight){
        alert('我已经滚动到了底部');
    }
    if(scrollTop == 0) {
        alert('我已经滚动到顶部了');
    }
}
window.onscroll = scrollBottomOrTop;
</script>
    
</body>
</html>

div滚动到底部加载

http://jsbin.com/fafexeqifi/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .scrolldiv {
      width: 500px;
      height: 400px;
      margin: 10px auto;
      background-color: #FF0000;
      overflow-y: scroll;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="scrolldiv" id="testDiv">
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>
  </div>
  
  <script>
    
    var divscroll = document.getElementById('testDiv');
    function divScroll() {
      var wholeHeight = divscroll.scrollHeight;
      var scrollTop = divscroll.scrollTop;
      var divHeight = divscroll.clientHeight;
      
      if(scrollTop+divHeight>=wholeHeight) {
        alert('div滚动到底部了');
      }
      if(scrollTop == 0) {
        alert('滚动到头部了');
      }
    }
    
    divscroll.onscroll = divScroll;
  </script>

</body>
</html>

计算滚动轴的宽度1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>获取滚动轴的宽度</title>
</head>
<body>
  
  <script>
      function getScrollBarWidth() {
          var el = document.createElement('p'),
          styles = {
               '100px',
              height: '100px',
              overflowY: 'scroll'
          },i,scrollBarWidth;
          
          for(i in styles) {
              el.style[i] = styles[i];
          }
          document.body.appendChild(el);
          scrollBarWidth = el.offsetWidth - el.clientWidth;
          el.remove();
          return scrollBarWidth;
      }
      
      console.log(getScrollBarWidth());
  </script>

</body>
</html>

计算滚动轴的宽度2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>获取滚动轴的宽度</title>
</head>
<body>
  
  <script>
      function getScrollBarWidth() {
          var el = document.createElement('p'),
          styles = {
               '100px',
              height: '100px'
          }, i, clientWidth1, clientWidth2, scrollBarWidth;
          
          for(i in styles) {
              el.style[i] = styles[i];
          }
          
          document.body.appendChild(el);
          
          clientWidth1 = el.clientWidth;
          el.style.overflowY = 'scroll';
          clientWidth2 = el.clientWidth;
          
          scrollBarWidth = clientWidth1 - clientWidth2;
          el.remove();
          return scrollBarWidth;
      }
      
      console.log(getScrollBarWidth());
  </script>

</body>
</html>

jquery滚动到底部和头部加载

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>jquery滚动到底部和头部加载</title>
</head>
<body>
  
<div style="height: 3000px;100%"></div>  
<script>
$(window).scroll(function () {
  var ks_area = $(window).height();
  var wholeHeight = $(document).height();
  var scrolltop = $(window).scrollTop();
  
  if(ks_area+scrolltop >= wholeHeight) {
    alert('滚动到底部了');
  }
  
  if(scrolltop == 0) {
    alert('滚动到头部了');
  }
})
</script>
  
  
  
  
  

</body>
</html>

http://jsbin.com/xemafiveti/edit?html,output

查看全文

相关阅读:
Linux的优缺点，Linux与windows的区别
 一文带你读懂 Mysql 和 InnoDB存储引擎
 由浅入深一个Demo带你认识Restful风格的架构
 同步锁Synchronized与Lock的区别?
认识多线程中start和run方法的区别?
Java多线程与并发相关问题
 初识WebSocket
Tomcat与Nginx服务器的配合使用及各自的区别
 Java内存模型相关原则详解
 你对区块链的理解还停留在炒币上吗

原文地址：https://www.cnblogs.com/lqcdsns/p/6009797.html