vue监听滚动事件，实现某元素固定位置显示

1.监听滚动事件在方法中添加一个方法btn_pos:function(){//滚动条的高度var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;console.log(scrollTop)//滚动条的高度>可视区...

阿乔姑娘

5940人浏览 · 2018-06-27 12:57:08

阿乔姑娘 · 2018-06-27 12:57:08 发布

1.监听滚动事件

在方法中添加一个方法

 
  btn_pos 
  : 
  function(){ 
 
  //滚动条的高度 
 
  var 
  scrollTop = 
  document. 
  body. 
  scrollTop || 
  document. 
  documentElement. 
  scrollTop; 
 
  console. 
  log( 
  scrollTop) 
 
  //滚动条的高度>可视区的高度 
 
   }

然后，在mounted钩子中，给window添加一个滚动监听事件

 
 window. 
 addEventListener( 
 'scroll', 
 this. 
 btn_pos); 

2.根据自己的需求，完善代码

 
  btn_pos 
  : 
  function(){ 
 
 
  //滚动条的高度 
 
 
  var 
  scrollTop = 
  document. 
  body. 
  scrollTop || 
  document. 
  documentElement. 
  scrollTop; 
 
 
  var 
  clientHeight= 
  document. 
  documentElement. 
  clientHeight; 
 
 
  console. 
  log( 
  clientHeight) 
 
 
  //滚动条的高度>可视区的高度 
 
 
  if( 
  scrollTop> 
  clientHeight){ 
 
 
  this. 
  local = ! 
  this. 
  local 
 

   } 
  else{ 
 
 
  this. 
  local = ! 
  this. 
  local 
 

   } 
 

   } 
 

 
 < 
 button 
 v-if=" 
 local" 
 class= 
 "btn_run" 
 >返回 
 </ 
 button 
 > 

 
  data () { 
 
  return { 
 
  local: 
  false 
 
   } 
 
   },

注意：如果离开该页面，就要移除这个监听事件，不然会报错

 
  destroyed () { 
  //离开这个界面之后，删除，不然会有问题 
 
  window. 
  removeEventListener( 
  'scroll', 
  this. 
  btn_pos) 
 
   }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^