js/jq宽高的理解与运用

时间：2021-11-13 07:55:11

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

              width: '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 = {

              width: '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;width: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

相关文章