滚动条和滚动事件

封装滚动函数

function addEvent(obj,sEv,fn){

  if(obj.addEventListener){

    obj.addEventListener(sEv,fn,false)

  }else{

    obj.attactEvent(‘on‘+sEv,fn)

  }

}

function addWheel(obj,fn){

  function wheel(ev){

    var oEvent=ev || event ;

    var bDown=true ;  //默认向下

    bDown = oEvent.wheelDelta ?  oEvent.wheelDelta < 0  : oEvent.detail  >0  ;      //oEvent.detail>0   向下---->firefox

    fn && fn(bDown)

    oEvent.preventDefault  &&  oEvent.preventDefault() ;

    return false ;

  }

  if(window.navigator.userAgent.toLowerCase().indexOf(‘firefox‘) !=-1){

    addEventListener(‘DOMMouseScroll‘,wheel,false)

  }else{

    addEvent(obj,‘mousewheel‘,wheel,)

  }

}

window.onscroll=fn;

$(‘选择器‘).scroll(fn);

link:http://www.cnblogs.com/yuteng/articles/1894578.html

link:http://www.cnblogs.com/xiaohuochai/p/5831640.html

link: https://www.w3cmm.com/javascript/mousewheel-dommousescroll.html

插件:http://www.jq22.com/jquery-info357

时间: 2024-10-14 08:44:52

滚动条和滚动事件的相关文章

javascript滚动条响应鼠标滑轮的实现上下滚动事件

实现鼠标滚动滚轮事件: <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"

页面滚动事件的使用

在现在更加追加页面加载速度和用户体验的情况下,页面的滚动事件使用的越来越多.通常我们使用滚动事件主要做的事情主要有: ajax异步加载,加快页面首次加载的速度 懒加载(或延迟加载):先把HTML元素放到textarea标签中,或把img的链接先放到一个字段里,页面滚动到某个位置时才进行开始加载 顶部导航或侧边导航的焦点跟踪 侧边数字导航的跟踪(例如百度经验) “回到顶部”功能 这两天做了一个demo,大家可以参考一下:页面滚动效果 上图中指出了用滚动事件实现的功能,不过demo中没有实现异步加载

判断滚动条是否滚动到最底端

条件: $("div")[0].scrollTop + $("div").height() == $("div")[0].scrollHeight 完整滚动事件: var nScrollHight = 0;  var nScrollTop = 0; var nDivHight = $(".div").height(); $(".div").scroll(function() {       nScrollH

CCScrollView添加滚动条和滚动背景

cocos2d-X里提供的CCScrollView里并没有提供滚动条和滚动条背景,我对它进行了一些修改,所用的cocos2d-x 版本为3.0 使用方法 CCBarScrollView* scrollView = CCBarScrollView::create(); scrollView->initWithViewSize((Size(280.0f,150.0f))); scrollView->setContentSize(Size(280,150*10.0f)); scrollView-&g

vue监听滚动事件 实现动态锚点

前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用 <a href="#i

javascript 学习之自定义滚动条加滚轮事件

要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定 2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta 1 <!doctype html> 2 <html> 3 <head> 4 <title>拖拽

C#超简单方法实现两个richtextbox控件滚动条同步滚动

此文章属于作者原创,转载请注明,谢谢 有时候我们需要实现对照文章等,往往将文本放到两个richtextbox控件中,但是,如果我们需要同步滚动查看,来达到更好的观看效果. 当然,传统的方法重载控件或者自定义控件都可以达到目的,但是对于新手或者想仅仅只用一次这个控件的人来说,是非常麻烦的.所以,接 下来我来提供一种简单快捷的方法来实现:richtextbox滚动条同步的功能. 首先,我们在winform窗体创建两个richtextbox控件 下面介绍两个方法,我经常用到 第一个方法,获得当前鼠标所

设置鼠标滚动事件

当QScrollview内容过多出现滚动条时,此时如果把鼠标移到里面的一个button上并滚动滑轮时,可以看到QScrollview并不会出现滚动的情况,因此我们就需要为button添加一个滚动事件 注:SubTitlePushButton继承于QPushButton,自定义的一个button类,然后在里面添加鼠标滚动事件 bool SubTitlePushButton::event(QEvent *event) { /* if (event->type() == QEvent::Paint)

对于鼠标滚动事件的扩充

本篇如题,是对上一个鼠标滚动事件的扩充 具体扩充内容: 1.可以添加点击元素(control_up/control_down)来控制页面的滚动 2.可以选择触发方式(点击.滚轮滚动.点击和滚轮滚动) //使用鼠标滚轮每次滚动浏览器大小的距离//obj格式{touch: click||scroll||click&scroll, control_up: id, control_down: id}//touch:什么触发方式,三个选项click/scroll/click&scroll:contr