vue中监听页面滚动和监听某元素滚动

Love The Way You Lie 2022-11-17 13:47 216阅读 0赞

# [vue中监听页面滚动和监听某元素滚动][vue] #

①监听页面滚动

在生命周期`mounted`中进行监听滚动：

mounted () {
        window.addEventListener('scroll', this.scrollToTop)
    },

在方法中定义监听滚动执行的方法：

scrollToTop() { 
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop)
    },

记得在离开当前路由解绑scroll事件

beforeRouteLeave(to, form, next){
        window.removeEventListener('scroll',this.scrollToTop);
        next();
      }

②监听某元素滚动

> 需要监听的这个元素需要拥有固定的高度

vue组件中：

<div class="read-con"  @scroll="scrollEvent" >
    </div>

在方法中定义scrolldiv，是监听class为read-con滚动以后需要执行的方法

scrollEvent () {
          let _this = this
          let read = _this.$el.querySelector('#read')
          console.log(read.scrollToTop)
    },

③ 获取各个元素高度  
获取具体一个元素的真实高度：  
使用scrollHeight的时候,如果scrollHeight小于offsetHeight的时候，高度就是offsetHeight，只有超过offsetHeight的时候才是scrollHeight的高度，不管隐藏不隐藏内容

// 文档高度
        let docHeight = document.querySelector('.page').scrollHeight;

获取窗口高度：

// 窗口高度
        let winHeight = document.body.offsetHeight;

[vue]: https://www.cnblogs.com/jiaoshou/p/13555329.html

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 12 阅读

相关 jq监听页面滚动结束

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小鱼儿/ 2023年01月02日 15:21/ 0 赞/ 144 阅读

相关 JS页面滚动监听

window.onscroll = function() { //scrollTop就是触发滚动时的高度 var scroll= docume

分手后的思念是犯贱/ 2022年12月02日 15:20/ 0 赞/ 167 阅读

相关 JS监听页面滚动

mounted(){ document.addEventListener('scroll', this.scroll) }, beforeDe

谁践踏了优雅/ 2022年11月22日 00:12/ 0 赞/ 253 阅读

相关 vue中监听页面滚动和监听某元素滚动

[vue中监听页面滚动和监听某元素滚动][vue] ①监听页面滚动在生命周期`mounted`中进行监听滚动： mounted () { w

Love The Way You Lie/ 2022年11月17日 13:47/ 0 赞/ 217 阅读

相关 ionic 监听页面滚动，点击停止滚动

原文出处：[https://www.cnblogs.com/lee-xiumei/p/7449021.html][https_www.cnblogs.com_lee-xiume

╰+哭是因爲堅強的太久メ/ 2022年04月08日 17:45/ 0 赞/ 391 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 515 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 699 阅读

相关 React 监听页面滚动

const scrollEvent = event => { if (!event.srcElement.scrollTop) { //处理向

墨蓝/ 2021年11月16日 14:32/ 0 赞/ 871 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 521 阅读