首先在你要监听的DIV中加入一个ID。
例
<div id = "being_monitored"> <p> 111 </p> <p> 222 </p> <p> 333 </p> </div>
在window.onload 中添加JS
window.onload = function(){ listen_scroll(); }; function listen_scroll() { $("#being_monitored").scroll(function () { var scrollTop = $(this).scrollTop(); console.log(scrollTop); }); }
这样就可以监听到滚动条的位置了。
相关推荐
使用原生js获取浏览器可是高度,滚动条高度,监听滚动条,滑动时 触发 改变导航元素位置,和子元素样式,适合新手参考借鉴!
html_javascript_监听滚动条demo
vue监听 vue实时监听窗⼝滚动条 1.在 mounted ⽣命周期函数注册滚动条事件
小知识点,废话不多说,直接上代码 css: 代码如下: ”code” class=”css”>&...</pre><br> js: 代码如下: ”code” class=”javascript”>var auchorTop = $(“#anchor”).css(“top”); auchorTop = Number(auchorTo
1、怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: [removed] = ...
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...
js滚动条到底部时自己加载新的内容 页面局本加载类似新浪微博
本篇文章主要介绍了详解使用vue-router进行页面切换时滚动条位置与滚动监听事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,...
如何监听滚动条到指定的位置 分解要点寻找解决思路: 一、如何实现数字动画的效果 在vue的官方文档(https://cn.vuejs.org/v2/guide… 中,实现了数字动画特效。于是参照此示例基于tween来完成。 二、如何监听滚动条...
手机端滑动事件监听 简单的JS
监听滚动条顶部距离、显示百分比、下拉到底部顶部浮动
在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:[removed]。当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示“返回面部” js网页滚动条滚动事件 <...
// 当页面滚动条变化时,执行的函数: var scrollTop=$(this).scrollTop(); //滚动条距离顶部的高度 console.log(scrollTop) if(scrollTop > 100 ){ $('.div_last').show(200) // console.log(1) }else { $...
下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 [removed] = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed")....
jquery监听DIV的事件,可监听DIV的变化的事件,直接引用即可使用
angular-snapscroll, 在 Angular 中,垂直滚动和捕捉功能 角 snapscroll angular-snapscroll向 Angular 添加垂直scroll-and-snap功能。js仅实现只需要 Angular 内核6.2kB 缩小时,压缩时 2.3 kB
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
获取组件中窗口对象的滚动位置 用法 您可以使用它来建立一个粘性div,该div随光标移动。 import ScrollIndicator from "react-scroll-sensor" ; { ( scrollX , scrollY ) => ( Hello < / p > ) } < / ...
js/jq实现回顶动画效果以及滚动条监听事件详解 在平常的网站中为了优化用户体验,可以说回顶效果是应用最多的js特效了。 废话不多说,直接开门见山。 一.回顶动画效果 1.html代码 Document //设置页面高度 ^ //...