FireFox下设置DIV的top和left无效解决方法

本文提供了一段JavaScript代码,用于解决火狐浏览器和IE浏览器之间的兼容性问题,特别是针对div元素在火狐下设置top和left属性无效及IE下滚动条无效的情况。

火狐浏览器和IE浏览器有很多冲突,往往在IE下正常的在火狐下就不正常了,这就需要程序去判断,搞定他们兼容问题!

下面这段代码解决了在火狐下div设置top和left无效的BUG和在IE下滚动条无效的BUG

------------------------------------------------JS-------------------------------------------------

function ShowNew(ev)
{
//兼容火狐和IE获取event对象

var ev = ev||window.event;

 

var x=0;var y=0;

 

if(ev.pageX || ev.pageY)

{

x=ev.pageX;y=ev.pageY;

}
else

{

//兼容火狐和IE获取滚动条的滚动参数

if (document.documentElement && document.documentElement.scrollTop)
{
 t = document.documentElement.scrollTop;
 l = document.documentElement.scrollLeft;
}
else if (document.body)
{
 t = document.body.scrollTop;
 l = document.body.scrollLeft;
}

x=(ev.clientX + l - document.body.clientLeft);y=(ev.clientY + t  - document.body.clientTop);
}

 

alert('x:'+x+' y:'+y);//测试显示

 

}

----------------------------------------------HTML----------------------------------------------

<div id="NewInfo" style="z-index:100;position:absolute;">aaaaaaaa</div>

<img onmouseover="javascript:ShowNew(event);" src="a.jpg"/>

要在**不使用构建工具(如 Webpack、Vite)的情况下**正确使用 `<van-back-top>` 组件,你需要通过 **原生 ES Module 方式引入 Vant Vue 的浏览器兼容版本**,并确保组件被正确注册渲染。 --- ### ✅ 目标 让 `<van-back-top>` 在页面滚动时显示,并点击后能平滑返回顶部。 --- ## ✅ 解决方案:纯前端 ES Modules + Vant 浏览器版 以下是完整可运行的代码示例,在没有打包工具的前提下实现 `<van-back-top>` 功能。 ```html <!DOCTYPE html> <html lang="zh" class="van-theme-light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>每日进度 - 返回顶部示例</title> <!-- 引入 Vant 样式 --> <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" /> <style> body { margin: 0; padding: 0; background: #f7f8fa; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; } .divbox { margin: 10px; min-height: 120vh; /* 确保可以滚动 */ padding-bottom: 200px; } .content-item { padding: 15px; background: #fff; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } </style> </head> <body> <div id="app"> <!-- 导航栏 --> <van-nav-bar title="每日进度" left-arrow @click-left="goBack" /> <!-- 主内容区 --> <div class="divbox" ref="container"> <div v-for="i in 20" :key="i" class="content-item"> 进度条目 {{ i }} </div> </div> <!-- 返回顶部按钮 --> <van-back-top target=".divbox" :visibility-height="200" /> <!-- 底部占位防止内容过短 --> <div style="height: 200px;"></div> </div> <!-- 加载 Vue Vant 的浏览器兼容模块 --> <script type="module"> // 从 CDN 加载 Vue Vant import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js'; import { NavBar, BackTop } from 'https://fastly.jsdelivr.net/npm/vant@4/lib/esm'; const app = createApp({ methods: { goBack() { history.back(); } } }); // 注册全局组件 app.use(NavBar); app.use(BackTop); // 挂载应用 app.mount('#app'); </script> </body> </html> ``` --- ## 🔍 关键点解释 ### 1. ✅ 使用 CDN 提供的 ESM 版本 ```js import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js'; import { NavBar, BackTop } from 'https://fastly.jsdelivr.net/npm/vant@4/lib/esm'; ``` - `vue.esm-browser.js`:专为浏览器设计的 Vue 3 模块化版本,支持直接 `import`。 - `vant@4/lib/esm`:Vant 官方提供的基于 ES Module 的组件导出路径,每个组件独立可导入。 > ⚠️ 注意:必须使用支持 ESM 的现代浏览器(Chrome、Edge、Firefox 等)。 --- ### 2. ✅ 正确使用 `<van-back-top>` ```html <van-back-top target=".divbox" :visibility-height="200" /> ``` | 属性 | 说明 | |------|------| | `target` | 指定哪个容器滚动时触发显示。这里是 `.divbox` | | `visibility-height` | 滚动超过 200px 才显示按钮 | | 默认行为 | 点击后自动滚动回顶部(平滑动画) | --- ### 3. ✅ `target` 必须是可滚动元素 你不能只对 `window` 滚动起作用(除非省略 `target`),但如果你设了 `target=".divbox"`,那么: - `.divbox` 必须有固定高度 + `overflow-y: auto` - 或者依赖整个页面滚动(此时建议去掉 `target`) #### ✅ 推荐方式一:监听 window 滚动(最简单) ```html <!-- 不指定 target,则监听 window 滚动 --> <van-back-top :visibility-height="200" /> ``` #### ✅ 推荐方式二:自定义容器滚动(适合内层滚动布局) ```css .divbox { height: 100vh; overflow-y: auto; } ``` 然后保留 `target=".divbox"` 即可。 --- ### 4. ❌ 常见错误排查 | 错误 | 原因 | 解决方法 | |------|------|----------| | `<van-back-top>` 不出现 | 没滚动或 `visibility-height` 太高 | 减小到 `100` 测试 | | 报错 `cannot resolve 'xxx'` | 路径不对或网络问题 | 检查 CDN 链接是否可用 | | 按钮出现但点击无效 | target 元素不存在或不可滚动 | 确保 DOM 存在且可滚动 | | 图标不显示 | 缺少字体或 SVG 图标资源 | Vant 4+ 使用内 SVG,无需额外加载 | --- ## ✅ 可选增强功能 ### 添加文字提示 ```html <van-back-top text="顶部" :visibility-height="200" /> ``` ### 自定义图标 ```html <van-back-top :visibility-height="200"> <div style="font-size: 20px;">🔝</div> </van-back-top> ``` --- ## ✅ 总结 在无构建工具环境下使用 `<van-back-top>` 的核心步骤: 1. 使用 `<script type="module">` 支持 ES6 模块; 2. 通过 CDN 导入 `vue.esm-browser.js` `vant/lib/esm` 中的组件; 3. 用 `app.use(BackTop)` 注册组件; 4. 在模板中添加 `<van-back-top />` 并设 `target` 或默认监听 `window`; 5. 确保页面或目标容器可以产生足够滚动。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值