vue移动端监听滚动条高度的实现方法

这两天做移动端项目遇到的问题，就是当滚动条下拉到一定的高度的时候，让某个东西固定定位到顶部

首先做的如何监听滚动条的高度，下面是我写的方法

var _this =this
window.addEventListener('scroll',function(){
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 if(scrollTop>100{//滚动条的高度，可以动态获取也可以写死
  //这里写要执行的操作
_this.gofixed = false

console.log(1); }else{ _this.gofixed = true }},true)我的这个方法是应用v-bind:class 来添加一个类 名

gofixed

是判断的变量

以上这篇vue移动端监听滚动条高度的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效

    实现目标 浏览各大云平台,发现一个页面特效使用较为频繁,以"百度云"为例(https://cloud.baidu.com/),进入百度云后,当滚动条滚动至"更可靠的数据支持"模块时,页面数据将会开始滚动式增长特效.下面将会介绍我的解决方案,希望有同行更好的解决方案大家一起交流. 解决思路 主要的解决要点如下: 如何实现数字动画的效果 如何监听滚动条到指定的位置 分解要点寻找解决思路: 一.如何实现数字动画的效果 在vue的官方文档(https://cn.vuejs.

  • vue.js-div滚动条隐藏但有滚动效果的实现方法

    组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox>0){ boDiv.addEventListener('DOMMouseScroll', function(event) { //火狐

  • vue 每次渲染完页面后div的滚动条保持在最底部的方法

    实例如下: //每次页面渲染完之后滚动条在最底部 updated:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) } //第一次页面渲染完之后滚动条在最底部 methods:function(){ this.$nextTick(function(){ var div = document.ge

  • vue 中滚动条始终定位在底部的方法

    滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有到达底部,而是距离底部还有一点距离(一脸懵逼) 估计是动态加载数据时,数据还未加载,滚动条就已经执行,知道原因了,那就实践呗. 第二次尝试,利用vue的watch监控数据的改变,然后动态修改滚动条到顶部的距离

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • 基于vue.js 2.x的虚拟滚动条的示例代码

    基于vue.js 2.x的虚拟滚动条的示例代码

    前言 记得以前偶然有一次浏览过一个开源的cms项目,发现这个项目的左边的菜单已经超出了windows的宽度,我就好奇为什么没出滚动条呢?然后我仔细一看,发现它左侧有一个小的div,然后我尝试着拖动它,发现竟能和原生的滚动条一样!可以通过查看它的源码,发现了这款滚动条的叫做slimScroll,然后我去它的github仓库 看了下,研究了一下源码,给我的感觉是我也能做出来一样的滚动条!通过vue实现! 设计 好, 现在开始我们的设计滚动条的步骤: 设计滚动条dom 首先要思考的是: 如果要使你需要

  • vue 纯js监听滚动条到底部的实例讲解

    在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • vue移动端监听滚动条高度的实现方法

    这两天做移动端项目遇到的问题,就是当滚动条下拉到一定的高度的时候,让某个东西固定定位到顶部 首先做的如何监听滚动条的高度,下面是我写的方法 var _this =this window.addEventListener('scroll',function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop>100{//滚动条的高度,可以动态获取也可以写死 //

  • js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法

    本文实例讲述了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法.分享给大家供大家参考.具体如下: //控制logo的显示位置 Begin window.addEventListener("resize", function () { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度) changeLogoPosition(); }, false); changeLogoPosition(); function changeLogoPosition() { var conten

  • PostgreSQL数据库服务端监听设置及客户端连接方法教程

    PostgreSQL数据库服务端监听设置及客户端连接方法教程

    众所周知,PostgreSQL 是一个自由的对象-关系数据库服务器(数据库管理系统),是一个可以免费使用的开放源代码数据库系统.本文详细介绍了PostgreSQL数据库服务端监听设置及客户端连接方法,具体如下: 一.背景介绍: 本文所述PostgreSQL服务端运行在RedHat Linux上,IP为:192.168.230.128 客户端安装在Windows XP上, IP为:192.168.230.1 二.配置方法: 1.修改服务端/opt/postgresql/data/postgresq

  • Vue使用Proxy监听所有接口状态的方法实现

    在开发项目过程中几乎所有接口都需要知道它的返回状态,比如失败或者成功,在移动端通常后台会返回结果,而我们只需要一个弹窗来弹出来结果就可以了.但是这个弹窗如果在整个项目里需要手动去每一个都定义,那是非常庞大的代码量,而且维护起来非常的麻烦.通常做法就是绑定在原型上一个公共方法,比如this.message('后台返回接口信息'). 这样看似省力了很多其实还是很麻烦. 如果使用了proxy做一个全局代理,那么就完全不一样了.不管任何一个api都会将状态传递个这个代理中心,并且由代理中心直接反应结果.

  • vue 监听屏幕高度的实例

    项目用vue版本是2.0的,项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把window.onresize事件挂在到mounted mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.docum

  • vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

    本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否

  • VUE 实现滚动监听 导航栏置顶的方法

    HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过 简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div> <!-- 公司信息 浏览量 --> </div> <div id="fixedBar" :class=&quo

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • Vue 监听列表item渲染事件方法

    直入正题,不废话! 使用Vue渲染列表是很简单方便的,但如果需要在渲染item的时候去监听事件就无法实现了,楼主我翻遍了Vue的api也没找到合适的方法去解决,其中也提到使用watch和vue.nextClick 监听,但这些都不能实现,苦恼啊,不过机智的我还是想到了曲线救过的方法,利用过滤器来实现,代码如下 <li v-for="item in list"> {{item.content | setEvent item.id , item.name}}</li>

随机推荐