屏幕滚动事件兼容性

最新推荐文章于 2023-03-11 18:15:33 发布
最新推荐文章于 2023-03-11 18:15:33 发布
阅读量352 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kumayato/article/details/72598423
版权 
function scroll() {
        if (window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if (document.compatMode == "CSS1Compat")  // 声明的了 DTD
        // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    };
kumayato
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义滚动条（兼容所有浏览器）
07-25
兼容各种浏览器，多种滚动条样式，兼容各种浏览器，多种滚动条样式
鼠标滚轮事件（兼容版）
weixin_34247032的博客
04-03 97
案例背景 　　通过鼠标滚轮滚动，放大缩小容器（上滚变短，下滚变长）。 案例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滚轮事件</title> </head> ...
滚轮事件以及兼容性问题
407指导员
11-17 192
滚轮事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚轮事件</title> <style> #box1 { width: 100px; height: 100px; background-color: red;
为窗口添加滚动条事件
weixin_34179762的博客
08-17 878
为窗口添加滚动条事件其实非常的简单， window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；即 var scrolltop=document.documentElement.scrollTop||document.bod...
鼠标滚轮事件，解决兼容浏览器
weixin_46002223的博客
02-27 255
鼠标滚轮事件，解决兼容浏览器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
html5实现输入框fixed定位在屏幕最底部兼容性
11-19
在HTML5中，实现输入框`fixed`定位在屏幕最底部的兼容性是一个常见的挑战，尤其是在面对各种设备、浏览器和输入法的差异时。这里我们将深入探讨如何解决这个问题，并提供几种可能的解决方案。 首先，问题的根源在于...
在vue中实现禁止屏幕滚动,禁止屏幕滑动
10-15
本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先，禁止屏幕滚动的基本思路是通过监听并阻止触摸移动事件（`touchmove`）和鼠标滚轮事件（`mousewheel`）的默认行为。在Vue中，我们可以直接在...
JS解决position:sticky的兼容性问题的方法
11-30
然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个问题，我们可以采用JavaScript编写一个组件来模拟`position: sticky` 的效果，以确保在所有目标平台上的一致...
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
在移动应用开发中，尤其是构建跨平台应用时，兼容性和用户体验是至关重要的。"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户...
屏幕滚动监听事件
weixin_46096438的博客
07-12 356
屏幕滚动监听事件
pc整屏滚动
09-18
h5动画，pc整屏滚动，并且每屏都有动画，动画都是通过css3的animation写的 h5动画，pc整屏滚动，并且每屏都有动画，动画都是通过css3的animation写的
滚动条的浏览器兼容问题
Tempta的博客
05-28 2008
谷歌浏览器 谷歌可设置大部分滚动条样式，但是无法设置内嵌式滚动条，如下图： /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1） width指竖向滚动条宽度 height指横向滚动条高度 */ ::-webkit-scrollbar{ width:10px; height:10px; } /*滚动条两端的按钮，可以...
鼠标滚动兼容性问题
02-03 288
window.onload=function(){ var oDiv = document.getElementById('div1'); /* ie/chrome： onmousewheel event.wheelDelta 上：120 下：-120   firefox: DOMMouseScroll 必须用addEventListener IE9以下会报 “Object
scroll滚动事件兼容和polyfill
最新发布
qq_36262295的博客
03-11 511
scroll
屏幕滚动事件的JS写法
修炼中的小妖怪
12-27 1662
$(function () { //绑定滚动条事件 $(window).bind(“scroll”, function () { var sTop = KaTeX parse error: Expected '}', got 'EOF' at end of input: … if (!(&amp;quot;.openFix&amp;quot;).is(&amp;quot;:visible&amp;quot;)) { try { $(&amp;quot
如何自动计算屏幕滚动时加载事件？
BobZhangfighting的博客
06-15 1302
经常我们在开发工作中面临这种问题，特别是拖动滚动条到一定距离时需要加载事件，一般用于分页加载数据。 因此今天总结了一种方法： 首先必须明白几个元素属性的意思： （1）获取浏览器显示区域（可视区域）的高度 ：$(window).height();  （2）获取浏览器显示区域（可视区域）的宽度 ：$(window).width();    （3）获取页面的文档高度:$(document)
你把 浏览器滚动事件 玩明白
技术前端，忠于热爱 @0.活在风浪里
08-02 1947
​前期回顾​vite+vue3+封装axios+封装loading+封装返回顶部_0.活在风浪里的博客-CSDN博客目前为止我们实现了axios封装loading封装返回顶部封装！本人亲测保证能用，最后祝大家2022越来越强https奇怪的知识又增加了念及此，安排一下。..................
Javascript鼠标滚轮事件兼容写法
个人前端记录
07-17 2039
1.mousewheel事件(兼容opera,chrome,safari,IE) mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时，wheelDelta的值是正负120的倍数。 值得注意的是，在opera9.5之前的版本，wheelDelta的正负号是颠倒的，这里不做考虑 一般情况下，监听wheelDelta的正负值，就可以确定鼠标滚轮...
各大浏览器滚动条兼容性问题
Summer_JK的博客
12-03 2301
解决各大浏览器隐藏滚动条的兼容性问题 <html> <head> <style> .outer-container { width: 350px; height: 300px; overflow: hidden; } .inner-container { height: 300px; width: 350px; overflow-x: hidden; ove
浏览器兼容性：JavaScript事件坐标解析
开发者在编写兼容性代码时需要考虑这些差异，确保在所有主流浏览器中都能正确获取和使用鼠标位置信息。 为了实现跨浏览器的事件处理，开发者通常需要使用条件判断或库（如jQuery）来统一不同浏览器下的坐标获取方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值