滚动条事件

之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了。

下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码

window.onscroll = function () {
           var t = document.documentElement.scrollTop || document.body.scrollTop;
           if (t > 0) {
               $(".cbbfixed").css("bottom", "10px");
           } else {
               $(".cbbfixed").css("bottom", "-85px");
           }
       }

注:t:滚动条距离top端的距离

t>0,即滚动条一旦滚动,立即执行if()语句,else()中的代码是,滚动条到到top处时,返回顶部的div隐藏

返回顶部按钮的点击操作

       $("#cgotop").click(function(){
           $('body,html').animate({ scrollTop: 0 }, 100);
           return false;
       });

补充:

1、监听某个元素的滚动条事件

$(selector).scroll(function(){.......});

2.获取滚动条滚动的距离

$(selector).scrollTop();

$(selector).scrollLefft();

时间: 2024-08-08 22:08:52

滚动条事件的相关文章

为窗口添加滚动条事件

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

Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)

概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用鼠标滚轮的时候,页面会自动加载剩余的内容.如下: 简约而不简单,正是这种别出心裁,突破常规的设计才能得到用户的青睐…… 实现思路 在前端开发可以使用一些jQuery插件实现这种效果,后台只需要准备好数据就行了.在Qt中如何给列表组件(QListWidget,QTreeWidget, QTableWi

js获取本地时间和div滚动条事件

//获取当前日期并进行格式转化getSysemTime:function () { var newTime=Date.parse(new Date()); function add0(m){return m<10?'0'+m:m } function format(newTime){ //newTime是时间搓,否则要parseInt转换 var time = new Date(newTime); var y = time.getFullYear(); var m = time.getMonth

单击滚动条两端的箭头,会触发的滚动条事件

Change 滚动条控件具有水平滚动条控件(HScrollBar)和垂直滚动条控件(VScrollBar),他们除了方向不同外,其它没有什么区别.使用滚动条控件可以浏览比较大的图片.文本等内容,这样以节省窗体空间.滚动条的常用属性主要有以下几个: (1)Min属性:用于返回或设置滚动条控件Value属性的最小值,即滚动条 最小值 (2)Max属性:用于返回或设置滚动条控件Value属性的最大值,即滚动条 最大值 (3)Value属性:用于返回或设置滚动条控件的当前值. (4)Largechang

jquery滚动条事件

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body>

动态绑定滚动条事件

我看看是否能描述清楚这个需求: 现在有两块相关的区域:左列表,右操作说明.列表可能很长,有垂直滚动条:那么在滚动的时候,希望右侧的操作说明保持不动,好随时查阅. 这好办,将右侧的操作说明所在的DIV的position设成fixed,如此即可在左侧列表滚动之时岿然不动矣. 问题是,整个页面也有一个垂直滚动条.当这个页面滚动条滚动时,这个fixed的操作说明,因为在屏幕中位置恒定不变,并不随整个页面滚动,结果变成遮盖了其他滚动下来的内容.完全变形. 咋整? 很简单,左侧列表滚动条滚动时,将操作说明设

vue滚动条事件

<div @scroll="woListScroll($event)" class="listBoxCon"> methods: { woListScroll(event) { if (event.srcElement.scrollHeight - (event.srcElement.scrollTop + event.srcElement.clientHeight) == 0) { .....body } }}

JavaScript 滚动条事件

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/test.js" type="text/javascript" charset="utf-8"></script></he

如何判断滚动条滚到页面底部并执行事件

首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop.  clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度.        offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分.        scrollTop:这个是什么呢?他可以理解为滚动条可