<template>
  <div class="scroll">
    <div class="scroll-div-outer" id='scrollDiv'>
      <div class="scroll-div-inner">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'scroll',
  methods:{
    checkDivScroolTop(){
      //获取节点
      var scrollDiv = document.getElementById('scrollDiv');
      //绑定事件
      scrollDiv.addEventListener('scroll', function() {
        console.log(scrollDiv.scrollTop);
      });
    }
  },
  mounted(){
    this.checkDivScroolTop();
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .scroll-div-outer{
    position:fixed;
    height: 100%;
    width: 100%;
    border: 1px solid #ccc;
    overflow: auto;
  }
   .scroll-div-inner{
    height: 200%;
    width: 200%;
    border: 1px solid #ccc;
  }
</style>

Vue-cli 鼠标监听事件之滚动条的更多相关文章

  1. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  3. 鼠标监听事件MouseListener

    public class Demo extends JFrame { private JTextArea textArea; public Demo() { setBounds(100, 100, 4 ...

  4. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  5. 第35天学习打卡(输入框 TextField监听 简易计算器,组合+内部类回顾复习 画笔 鼠标监听 窗口监听 键盘监听)

    1.输入框 TextField监听  package com.kuang.lesson02; ​ import java.awt.*; import java.awt.event.ActionEven ...

  6. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  7. Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

    <!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...

  8. Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件

    1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...

  9. vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

随机推荐

  1. 【CF1181D】Irrigation

    题目大意:给定 M 个城市,每年会选出一个城市举办比赛,现给出前 N 年城市举办比赛的情况.在接下来的年份中,每年会在举办比赛次数最小的城市举办比赛,如果有很多城市举办次数均为最小值,则在编号最小的城 ...

  2. 使用ajax向服务端发送Form中的数据

    前端代码: <form action="" id="myFormUpdate"> <p>宠物名称: <input type=&qu ...

  3. Python基础-day05

    高级变量类型 目标 列表 元组 字典 字符串 公共方法 变量高级 知识点回顾 Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (int) 浮点型(float) 布尔型(bool) ...

  4. HGOI 20190822 OCWA提高组模拟赛二

    Problem A 快递 根节点为$1$ , 含有$n$个节点的树,每一条边都有一段开放的时间$[s_i,e_i]$,和经过需要的时间. 有$q$组询问,每一次在时刻$t_i$出发从根节点出发走到第$ ...

  5. 翻译我去issues提问的回答内容

    我提问的原因主要是我要做.net core ABP的Token刷新功能,基本都根据网上的文章整合进ABP了,在如何存储的时候,总觉得系统的AbpUserTokens表为啥不利用进来,但是又找不到相关介 ...

  6. [LOJ3119][CTS2019|CTSC2019]随机立方体:组合数学+二项式反演

    分析 感觉这道题的计数方法好厉害.. 一个直观的思路是,把题目转化为求至少有\(k\)个极大的数的概率. 考虑这样一个事实,如果钦定\((1,1,1),(2,2,2),...,(k,k,k)\)是那\ ...

  7. Java基础__Java中异常处理那些事

    一.Exception 类的层次 所有的异常类是从 java.lang.Exception 类继承的子类. Exception 类是 Throwable 类的子类.除了Exception类外,Thro ...

  8. oracle条件参数中 IN函数中的值最大只能为1000个

    delete from dep where id in(1,2,3.....) 括号里面字段个数最大只能为1000个

  9. Golang Singleton

    package example import ( "fmt" "sync") var m *singletonvar once sync.Once func G ...

  10. pom.xml报Plugin execution not covered by lifecycle configuration错误

    环境     eclipse 4.3.0     maven 3.0.4     m2e 1.4.0      出现场景     以前的老项目,在我的环境(我的环境较新)下,别人老环境不报错. 错误示 ...