JS 获取当前屏幕高度方法和监听dom元素进入视口

js

网页可见区域宽： document.documentElement.clientWidth || document.body.clientWidth
网页可见区域高： document.documentElement.clientHeight || document.body.clientHeight
网页可见区域宽： document.documentElement.offsetWidth || document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.documentElement.offsetHeight || document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.documentElement.scrollWidth || document.body.scrollWidth
网页正文全文高： document.documentElement.scrollHeight || document.body.scrollHeight
网页被卷去的高： document.documentElement.scrollTop || document.body.scrollTop
网页被卷去的左： document.documentElement.scrollLeft || document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

jQuery

$(document).ready(function() {
    console.log($(window).height()); // 浏览器当前窗口可视区域高度
    console.log($(document).height()); // 浏览器当前窗口文档的高度
    console.log($(document.body).height()); // 浏览器当前窗口文档 body 的高度
    console.log($(document.body).outerHeight(true)); // 浏览器当前窗口文档 body 的总高度 包括border padding margin
    console.log($(window).width()); // 浏览器当前窗口可视区域宽度
    console.log($(document).width()); // 浏览器当前窗口文档对象宽度
    console.log($(document.body).width()); // 浏览器当前窗口文档 body 的宽度
    console.log($(document.body).outerWidth(true)); // 浏览器当前窗口文档 body 的总宽度 包括border padding margin
})

vue

<template>
    <div ref="homePage"></div>
</template>

<script>
export default {
    data() {
        return {
            clientHeight: ''
        };
    },
    watch: {
        // 如果 clientHeight 发生改变，这个函数就会运行
        clientHeight() {
            this.changeFixed(this.clientHeight);
        }
    },
    mounted() {
        // 获取浏览器可视区域高度
        this.clientHeight = document.documentElement.clientHeight; // document.body.clientWidth;
        window.onresize = function temp() { // 在窗口或框架被调整大小时触发
            this.clientHeight = document.documentElement.clientHeight;
        };
    },
    methods: {
        changeFixed(clientHeight) { // 动态修改样式
            this.$refs.homePage.style.height = clientHeight + 'px';
        }
    }
};
</script>

vue监听元素进入视口

<template>
  <div>
    <ul class="ulBox" id="ulBox">
      <li class="li" :id="'id'+item" v-for="(item,index) in list" :key="index">
        {{item}}
      </li>
    </ul>
    <!-- <ul class="box" @scroll="scrollEvent">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul> -->
  </div>
</template>

<script>
  export default {
  data() {
    return {
      list: [1,2,3,4,5,6,7,8,9],
    };
  },
  created() {
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop);
  },
  methods: {
    scrollEvent(e) {
      // const offset = this.$el.getBoundingClientRect();// vue中，使用this.$el获取当前组件的根元素
      console.log('clientHeight', e.target.clientHeight); // 可视区域的高
      console.log('scrollHeight', e.target.scrollHeight); // 正文全文高
      console.log('offsetTop', e.target.offsetTop); // 当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值.
      console.log('scrollTop', e.target.scrollTop); // 当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值.被卷去的头部
    },
    scrollToTop() {
      // 获取视窗高度
      //var domHight = document.body.offsetHeight;
      var domHight = window.screen.height || window.innerHeight ||
        document.documentElement.clientHeight;
      console.log('domHight', domHight);
      // dom滚动位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 获取监听元素
      var id;
      // 获取监听元素本身高度
      var scrollHeight;
      // 获取监听元素距离视窗顶部距离
      var offsetTop;
      // 获取监听元素距离顶部高度-窗口高度 
      var top;
      // 元素距离底部的高度+元素本身高度
      var bottom;
      this.list.map( (i) => {
        id = document.getElementById(`id${i}`);
        scrollHeight = id.scrollHeight;
        offsetTop = id.offsetTop;
        top = offsetTop - domHight > 0 ? offsetTop - domHight : 0;
        bottom = scrollHeight + offsetTop;
        // 页面滚动位置 > 元素距离顶部高度-窗口高度 && 页面滚动位置 < 元素距离顶部高度+元素本身高度
        if (scrollTop >= top && scrollTop <= bottom) {
          console.log('元素出现在可视区: ' + i);
        } else {
          console.log('元素不在了: ' + i);
        }
      });
    },
  },
}
</script>

<style lang='less' scoped>
  .ulBox {
    width: 100%;
    // height: 100vh;
    // overflow-y: scroll;
    margin: 0;
    padding: 0;
    list-style: none;
    .li {
      width: 100%;
      height: 5rem;
      border: 1px solid #999999;
      display: flex;
      justify-content: center;
      align-items: center;
    } 
    .li:not(:first-child) {
      border-top: none;
    }
  }
  .box {
  	width: 400px;
  	height: 600px;
  	border: 1px solid pink;
  	overflow: auto;
  li {
    width: 300px;
    height: 200px;
    background-color: #ccc;
  }
  &::after {
    content: '^';
    display: block;
    width: 10px;
    height: 10px;
    background-color: pink;
  }
}
p::first-letter {
  color: green;
}
p::first-line {
  color: green;
}
p::selection {
  color: red;
  background-color: #ccc;
}
</style>

滚动到顶部的用法==>