`
未雨绸缪
  • 浏览: 215777 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

在IE、FF、Chrome下滚动条的onscroll事件

阅读更多
有时在页面上,需要Fixed(css里的position属性)的效果,用JS实现的话,在如题的三个平台可以这样写:

window.onscroll = _onScroll;
function _onScroll(){
		
    var labeller_layer = document.getElementById('labeller_layer');
    var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
    
    labeller_layer.style.top = scrollTop  + 'px';
    
};


    其中document.documentElement.scrollTop + document.body.scrollTop;就是处理兼容性的关键,当页面加入DTD标示后 document.documentElement.scrollTop的值在IE和FF下正常,但document.body.scrollTop一直为0。在Chrome下就反过来了。

labeller_layer是一个我想随着滚轮移动的层

以上是针对onscroll事件平台兼容性的一个总结
5
0
分享到:
评论

相关推荐

    滚动条事件js代码

    本知识点主要围绕"滚动条事件js代码",关注如何在不同浏览器中实现滚动到底部的事件监听,并涉及到`onscroll`、`scrollTop`、`scrollHeight`和`clientHeight`等关键属性和方法。 首先,`onscroll`事件是HTML元素上...

    onscroll事件揭秘

    `onscroll`事件在JavaScript中被广泛使用,当用户滚动窗口或可滚动元素时,该事件会被触发。它的核心概念在于,它允许开发者在用户滚动时执行特定的代码块,从而实现对滚动行为的实时监控和处理。 ### 工作原理 当...

    C# winform 重绘滚动条

    在事件处理函数中,根据滚动条的状态更新滑块的位置,并重新绘制控件: ```csharp protected override void OnScroll(ScrollEventArgs se) { Invalidate(); // 触发重绘 base.OnScroll(se); } ``` 同时,为了...

    AS3 滚动条

    AS3滚动条是ActionScript 3.0编程语言中实现的一种用户界面元素,它主要用于在内容超出可视区域时提供导航。在AS3中,滚动条是通过Flash的UI组件库来创建和控制的,允许用户在长或宽的数据显示区域中进行上下或左右...

    C# winform自定义滚动条

    在C# WinForm应用开发中,有时候为了满足特定的界面设计需求,我们可能需要自定义滚动条(ScrollBar)控件。...记得在实际开发中,要充分考虑兼容性和性能优化,确保自定义滚动条在各种情况下都能稳定工作。

    外部滚动条控制iframe

    3. **同步iframe内部滚动位置**:在事件处理函数中,根据外部滚动条的位置,使用JavaScript设置iframe内部文档的滚动位置。这通常通过修改`iframe.contentDocument.body.scrollTop`或`iframe.contentWindow.scrollTo...

    jQuery美化滚动条

    该插件支持多种浏览器,包括Chrome、Firefox、Safari、Edge和IE8+,使得网页在各种环境下都能拥有统一且美观的滚动效果。 **安装与引入** 首先,你需要在项目中引入jQuery库和jQuery.nicescroll的JavaScript文件。...

    CSS在网页上实现浮动层跟随滚动条特效(兼容IE6)

    而在 IE6 以上版本或者其它 Firefox, Chrome, Safari, Opera 浏览器下,编程方式却变为无效,通过 CSS 样式 `position:fixed;` 就能实现浮动且能跟随滚动条移动。 2. 全 CSS 实现 这种方式使用几个特殊的 CSS 来...

    JS自定义滚动条,可以自定义很多类型的网页滚动条

    5. **监听滚动事件**:如果需要在滚动时执行某些操作,可以绑定滚动事件,如`onscroll`。 6. **更新和销毁**:当内容变化或不再需要自定义滚动条时,可以调用库提供的方法更新或销毁滚动条实例。 在自定义滚动条时...

    关于onScroll事件在IE6下每次滚动触发三次bug说明

    标题中的“关于onScroll事件在IE6下每次滚动触发三次bug说明”指的是在Internet Explorer 6(IE6)浏览器中,使用JavaScript的`onScroll`事件监听页面滚动时,会出现一个已知的bug:当用户滚动页面时,事件处理函数...

    为RichTextBox控件设置自定义滚动条

    在某些情况下,我们可能需要对`RichTextBox`的默认滚动条进行自定义,以满足特定的设计需求或提供更友好的用户体验。本文将详细讲解如何为`RichTextBox`控件设置自定义滚动条。 首先,我们要理解`RichTextBox`的...

    js模拟滚动条

    使用JavaScript,我们可以监听滚动事件,例如`onscroll`,然后根据滚动位置更新我们自定义滚动条的位置。可以创建一个div作为模拟滚动条的元素,并通过调整其位置来匹配实际滚动位置。 3. **计算滚动位置**: 当...

    仿苹果网站的滚动条

    2. 使用`window.onscroll`事件监听滚动行为,根据需要动态调整滚动条的透明度。 以下是一个简单的CSS示例代码: ```css /* 隐藏默认滚动条 */ body { overflow-y: scroll; -ms-overflow-style: none; /* IE 和 ...

    滚动条的代码

    滚动条在网页设计中起着至关重要的作用,它允许用户查看超出屏幕范围的内容。当我们谈论“滚动条的代码”时,通常是指通过JavaScript或者CSS来定制或操作浏览器默认滚动条的样式和行为。在这个主题中,我们将深入...

    滚动条刷新定位

    1. **记录滚动位置**:在页面即将刷新或者离开当前页面时,需要准确地记录下当前滚动条的位置。 2. **恢复滚动位置**:在页面加载完成后,根据之前记录的滚动位置信息,调整滚动条到相应的位置。 #### 三、实现方法...

    div随滚动条上下滚动

    在网页设计中,"div随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

    New js 滚动条

    3. 添加滚动事件:通过JavaScript监听滚动事件,如`onscroll`,根据滚动位置更新自定义滚动条的位置。 4. 实现滚动功能:通过修改CSS样式或者直接改变元素的位置来实现滚动效果。 四、性能优化 在实现自定义滚动条...

    js各种兼容滚动条

    综上所述,JavaScript在处理滚动条兼容性方面提供了多种方法和策略,包括使用CSS自定义Webkit内核的滚动条样式,通过事件监听滚动行为,以及借助第三方库实现更强大的自定义滚动条功能。在实际开发中,应根据项目...

    ext Gird 有滚动条功能

    在这个文件中,我们可以找到与滚动条相关的配置项和方法,如`scrollbars`配置,用来决定是否显示滚动条,以及`onScroll`事件处理函数,处理滚动条的滚动事件。 为了实现滚动条功能,通常需要以下步骤: 1. **配置...

Global site tag (gtag.js) - Google Analytics