`
zengshaotao
  • 浏览: 786783 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

鼠标点击的位置,滚动条,兼容

 
阅读更多

j经常要计算鼠标当前点击的位置,并且页面经常发生了滚动。这个时候需要考虑浏览器的兼容问题(不兼容的属性,得到的内容为0,比如document.body.scrollTop在chrome可以,但是在IE8下,就提示为0):

 

//方法1
functionmousePos(e){
  var x,y;
  var e = e||window.event;
  return {
    x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft,
    y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop
  };
};
  
//方法2
//Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了,
//在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移,
//而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop
function getMousePos(event) {
      var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      return { 'x': x, 'y': y };
    }
分享到:
评论

相关推荐

    js各种兼容滚动条

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

    获取鼠标在页面上的位置(包括滚动条)

    在网页开发过程中,有时候我们需要获取用户鼠标在页面上的具体位置,特别是当页面存在滚动条时,这将有助于实现某些交互功能,如动态提示、点击反馈等。本文将详细介绍如何通过JavaScript来获取鼠标在页面上的位置,...

    js 随鼠标滚动条滚动的div

    在JavaScript中,实现一个div元素随鼠标滚动条滚动的效果,主要涉及到两个关键概念:事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素,即使页面滚动,它们仍然保持在视口中的特定位置。 ...

    鼠标滚轮滚动条代码.zip

    【标题】"鼠标滚轮滚动条代码.zip"所包含的知识点主要集中在JavaScript(JS)编程领域,特别是关于网页交互和用户界面(UI)设计的一部分。这个压缩包提供了一种实现内容滚动条通过鼠标滚轮和拖拽进行操作的代码解决...

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx

    JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条,可以实现跨...

    JS模拟滚动条,兼容各浏览器

    系统默认的滚动条很丑,用这个可以自己换成图片等。 主要事件: 上、下按钮按住,内容慢慢滚动。...点击滚动条空闲位置,内容定位。 鼠标滚轮在内容中滚动时,内容滚动。 代码未整理,可能比较乱。

    浏览器滚动条兼容.rar

    在压缩包中的“滚动条兼容”文件,很可能是提供了这样的解决方案,可能包含一个JavaScript文件,用于检测浏览器类型并应用相应的样式。 在实现滚动条兼容时,需要注意以下几点: 1. **渐进增强**:确保在不支持...

    易语言API滚动条操作

    5. **设置滚动条参数**:这通常涉及到`SetScrollInfo`函数,它可以设置滚动条的最大值、最小值、当前位置、页面大小等。通过这个函数,我们可以精确控制滚动条的行为。 6. **设置窗口信息**:可能需要使用`...

    css美化滚动条

    可以使用伪类`::webkit-scrollbar-thumb:hover`、`::webkit-scrollbar-thumb:active`以及`::webkit-scrollbar-thumb:window-inactive`来控制不同状态下的滚动条样式,如鼠标悬停、按下和窗口非活动时的样式。...

    纯css控制内容随滚动条滚动,可放任意位置

    标题“纯css控制内容随滚动条滚动,可放任意位置”以及描述中的“纯CSS实现客服悬浮窗,随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位(fixed ...

    滚动条插件

    jQuery MCustomScrollbar 是一款功能强大的滚动条美化插件,它支持水平和垂直滚动条,提供了丰富的定制选项,包括滚动条的尺寸、颜色、滚动动画效果、鼠标滚轮和触摸设备的支持等。此外,该插件还具有自动调整大小、...

    四种漂亮的滚动条样式

    3. `scrollbar-highlight-color`: 当滚动条被鼠标悬停或者活动时,高亮部分的颜色。 4. `scrollbar-3dlight-color`: 设置滚动条3D高光的颜色,一般用于突出滚动条的边缘。 5. `scrollbar-darkshadow-color`: 滚动条...

    C# winform 自定义滚动条

    自定义滚动条还需要处理鼠标事件,如`MouseDown`、`MouseMove`和`MouseUp`,以实现拖动滑块的效果。当用户按下鼠标并移动时,需要计算新的滑块位置并更新`Value`属性,触发滚动事件。 4. **响应滚动事件** 如果...

    IE滚动条 CSS样式

    在早期版本的IE(如IE6、IE7)中,由于浏览器的兼容性问题,自定义滚动条样式并不完全支持,而从IE8开始,引入了`-ms-scrollbar`伪元素来允许一定程度的样式调整。然而,这些样式仅限于颜色、宽度和边框,不能像现代...

    MFC自动水平滚动条CListBox

    为了实现自动水平滚动条的功能,我们还需要在`CHorzListBox`中维护一些状态变量,比如当前的列表项宽度和滚动条的位置,以便在各种事件(如窗口大小变化、新项添加等)发生时进行适当的调整。 在实际的代码实现中,...

    C# winform自定义滚动条

    1. **鼠标交互**:处理`MouseEnter`、`MouseLeave`、`MouseDown`、`MouseUp`和`MouseMove`事件,可以实现鼠标进入、离开、按下、释放和移动时的滚动条响应。 2. **键盘交互**:通过监听`KeyDown`和`KeyUp`事件,...

    自定义滚动条插件

    2. **高度可定制化**:你可以自定义滚动条的外观,包括颜色、大小、形状等,甚至可以设置滚动条在鼠标悬停时的效果。此外,还可以调整滚动条的动态效果,如滚动速度、缓动函数等。 3. **易于使用**:...

    HTML中滚动条各种样式示例

    7. **滚动条位置** 如果需要,你可以使用`scrollbar-width`和`scrollbar-color`属性(非Webkit特有,但在Firefox和Safari中支持)来调整滚动条的宽度和颜色: ```css body { scrollbar-width: thin; /* 设置滚动...

    好看的滚动条样式

    - `scrollbar-highlight-color`:滚动条在鼠标悬停时的高亮颜色。 - `scrollbar-shadow-color`:滚动条阴影的颜色。 - `scrollbar-darkshadow-color`:滚动条在凹槽部分的颜色。 2. **伪元素选择器**: - `::...

    textArea滚动条样式

    创建覆盖在`textarea`上的透明div,监听滚动事件,手动调整div的位置以模拟滚动条效果。这种方法较复杂,需要考虑更多的边界情况和性能优化。 4. **浏览器检测与条件样式** 可以使用JavaScript检测浏览器类型,...

Global site tag (gtag.js) - Google Analytics