onscroll事件滚动距离

2026-09-07

onscroll 元素滚动事件

阻止事件冒泡 event.stopPropagation(); children():查找合集里面的第一级子元素.(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点 $("div").children(".selected") / $('.div').children(':last').css('border', '3px solid blue')find() : 元素的后代元素,此时可以用find()方法 children是父子关

监听页面中的某个div的滚动事件，并将其滚动距离保存到cookie

在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type{ height: 600px; overflow-y: auto; } 当里面的内容超过高度时,div会出现滚动条,监听这个div的滚动事件: //监听这个dom的scroll事件 document.getElementById("type").addEventListener(&quo

onscroll事件，onresize事件

js获取页面元素高度.宽度网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scro

一种统计ListView滚动距离的方法

注:本文同步发布于微信公众号:stringwu的互联网杂谈一种统计ListView滚动距离的方法 ListView做为Android中最常使用的列表控件,主要用来显示同一类的数据,如应用列表,商品列表等.ListView的详细使用与介绍可查阅官方文档ListView.这里不再展示叙述. 1 背景 ListView在屏幕上会固定一定长度,如果内容超过这个长度,一般是通过滑动来向下浏览更多的内容.此时有产品就想统计出用户在某一次浏览中是否有滑动,并且想实际量化该滑动距离.虽然觉得这个需求很扯淡,但

关于ZK框架的onScroll事件的问题

由于我现在所在的公司用到的zk框架,遇到了一个需求frozen on top. 简单来说就是滚动超过范围后,希望有一块东西停留在滚动窗口的顶部. 一.zk框架查看了zk的8.x版本,发现组件的支持的事件(Event)最大的父类如下: * <p>Events:<br/> * onClick, onDoubleClick, onRightClick, onDrop, * onMouseOver, onMouseOut, onOK, onCacnel, onCtrlKey and on

onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body onscroll="checkscroll()"> <div class="father" > <div class="son">我是移动块</div> &l

js动态添加onload、onresize、onscroll事件(另类方法)

js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加.也就是说,它只能这样来(以 onload 为例,下同): 代码如下: window.onload = function() { // ... }; 但这有个问题,就是想再为 onload 增加新的事件处理程序时,不能直接为 window.onl

移动端（IOS）iframe监听不到 onscroll 事件

问题描述: 我在一个页面A中有瀑布流,点击瀑布流中的图片需要进入到另外一个页面B,点击返回需要回到页面A中点击的位置,为了实现该效果所以在页面A中嵌入iframe,iframe指向页面B,页面B中同样也有瀑布流. 遇到的问题: 由于瀑布流都监听了onscroll事件,所以遇到的问题是在iframe中也就是页面B中监听的onscroll事件都不会触发,都会执行页面A中的onscroll事件,导致瀑布流全部加载到了父级的下面,也就是无法监听iframe中的onscroll事件,最后和同学商量判断wi

原生javasxript获取浏览器的滚动距离和可视窗口的高度

原生javasxript获取浏览器的滚动距离和可视窗口的高度 //封装兼容性方法获取滚动的距离 function getScrollOffset(){ if(window.pageXOffset){ return { x : window.pageXOffset, y : window.pageYOffset } }else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : docu

vue中记录页面的滚动距离

业务需求:pageOne页面是一个商品列表页面,在这个页面点击商品,就会跳转到pageTwo商品详细页面.此时再从pageTwo页面返回到pageOne页面时,pageOne页面需要做到:1.记录pageOne之前的滚动的距离.2.不重新请求数据.而从其它页面进入到pageOne页面时,pageOne页面不需要记录之前的滚动距离和需要重新请求数据. 1.使用keep-alive组件的实现方法 App.vue <template> <div id="app"> &

mui 怎样监听scroll事件的滚动距离

var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) { console.log(scroll.y); })

js的window.onscroll事件兼容各大浏览器

为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop:即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器! <!DOCTYPE html PUBLIC "-/

android ScrollView滚动距离和判断滚动停止状态

今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROLL_STATE_IDLE等. 解决的问题: 公司项目需要在一个列表中,类似listView,因为业务要求,这个列表是用拼凑的方法,拼凑出来的,所以外层包裹一层ScrollView. 现在公司要求,滑动到最后一条的时候,加载下一部分数据.如果使用scrollView.getScrollY()获得的是你

移动端touch事件滚动

本来想用在北京欢乐谷手机上用touch事件来模拟局部左右内容滚动里,但在touchmove上下滚动时由于禁止了默认事件而body滚动条不能滚动,虽然可以根据touchmove的坐标来判断方向,但体验效果不理想. 后来在查询相关资料后原来可以直接在css中使用overflow:auto;出来的滚动条用CSS3的-wekit-scrollbar{display:none}来隐藏; *拓展*::-webkit-scrollbar 滚动条整体部分*::-webkit-scrollbar-thumb 滚动

转载文章 -- 难搞的滚动事件(滚动默认，scrollTop)

关于取消默认事件现今的 chrome 浏览器,为了实现丝滑顺畅地滑动,活动时间直接执行而不再检测默认事件,这使得无法用 e.preventDafult() 来阻止默认事件. 现在需要添加 {passive: false} 配置 $(document).addEventListener( 'scroll', fun, {passive: false} ) 把事件被动监听设置为 false 之后,就可以正常阻止默认事件了. 关于 scrollTop 为了手动地使页面平滑滚动到某个高度,需要使用 $

onscroll事件的浏览器支持

window和普通div对象的scroll事件,被全部浏览器支持,其他元素的scroll事件,仅部分浏览器支持,如下图出处: http://w3help.org/zh-cn/causes/SD9013

【angularjs】使用angular搭建项目，滚动距离

常用方法滚动到顶部:$ionicScrollDelegate.scrollTop();或者$ionicScrollDelegate.$getByHandle('视图句柄').scrollTop(); 滚动到该视图的位置:$ionicScrollDelegate.$getByHandle('视图句柄').getScrollPosition(); 相关资料 http://www.ionic.wang/js_doc-index-id-30.html

js滚动距离

滚动距离 onclick="$('html,body').animate({scrollTop:$('.J_user_evaluate').offset().top-110},500)"

JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离

* 能够使用jQuery设置尺寸 * .width() width * .innerWidth() width + padding * .outerWidth() width + padding + border * .outerWidth(true) width + padding + border + margin * 能够使用jQuery操作坐标 * .offset() 永远基于网页文档(document)获取 * .position() 基于定位的祖先元素(offsetParent)获取

HTML页面滚动时获取离页面顶部的距离2种实现方法

获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下方法一:DOM 复制代码代码如下: <script> window.onscroll = function() { console.info(window.scrollY); } </script> 注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px) 方法二:jQuery 复制代码代码如下: $(function() {

onscroll事件滚动距离

热门专题