解决浏览器窗口缩小到一定比例，scrollTop无法修改的问题

最新推荐文章于 2024-04-27 14:59:16 发布
最新推荐文章于 2024-04-27 14:59:16 发布
阅读量729 收藏 1
点赞数 3
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51499501/article/details/127296251
版权

浏览器缩放的时候,scrollTop + 1会被设置成 1 * window.devicePixelRatio, 如果结果小于1就会被判定成+ 0, 所以需要保证每次变化的值大于1
const ratio = parseFloat((1 / window.devicePixelRatio).toFixed(2) ) + 0.01 // + 0.01 为了保证 ratio >= 1
dom1.scrollTop = dom1.scrollTop + ratio

四维虫子chenjd
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
JS：screen/client/offset/scroll/inner/avail的width/left
u011587399的专栏
03-14 597
1、名词解释 screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目标甲相对目标乙的距离。scroll：卷轴、卷动。指的是包含滚动条的的属性。inner：内部。指的是内部部分，不含滚动条。avail：可用的。可用区域，不含滚动条，易与inner混淆。
scrollTop不生效的解决办法
ToKeepCalm的博客
02-28 818
例如：document.getElementById('logContainer')中的。你设置的是另一个元素的滚动条，和你需要设置的滚动条有什么关系，所以导致滚动条不会生效。scrollTop不生效可能的原因有多个，请挨个进行排查！确定你设置滚动条的元素ID是否正确且唯一。，该ID是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？
浏览器窗口可视区域大小2
weixin_44406304的博客
08-19 144
开发工具与关键技术 ：VS2015、ASP.NET MVC 撰写时间：2019.8.18 继上一条文章 再是就是网页尺寸offsetHeight offsetHeight和offsetWidth，获取网页内容高度和宽度(它包括滚动条等边线，也就会随窗口的显示大小改变)。它的值： offsetHeight = clientHeight + 滚动条 + 边框。 首先是浏览器兼容性 var Width=...
javascript基础学习系列二百七十二： resize 事件和scroll 事件
m0_68635815的博客
03-06 709
当浏览器窗口被缩放到新高度或宽度时，会触发 resize 事件。这个事件在 window 上触发，因此 可以通过 JavaScript 在 window 上或者为元素添加 onresize 属性来指定事件处理程序。类似于其他在 window 上发生的事件，此时会生成 event 对象，且这个对象的 target 属性在 DOM 22 合规的浏览器中是 document。而 IE8 及更早版本中并没有提供可用的属性。不同浏览器在决定何时触发 resize 事件上存在重要差异。
解决浏览器缩放时ScrollTop失效
qq_59625204的博客
08-18 503
而在浏览器缩放时，window.devicePixelRatio会变成比1还小，所以会导致scrollTop++一直是0，此时使用下方代码就可以解决了。在谷歌浏览器中使用scrollTop++会失效，是因为scrolltop++会解析成1*window.devicePixelRatio，
当浏览器缩放时，scrollTop不生效
qq_43651168的博客
06-15 815
当浏览器缩放时，scrollTop++不生效，scrollTop++一直为0
关于 details.scrollTop++; 没有效果
m-dididid的博客
11-29 292
当出现details.scrollTop++; 没有效果时 console.log(details.scrollTop); //0 details.scrollTop++; console.log(details.scrollTop); //0 是因为没有设置details的高度，给它一个高度就可以了 ++之后数字只比之前大了0.7多(不到1)，是因为计算机存储数据的...
scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
weixin_33895695的博客
03-15 535
scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或...
浏览器窗口缩小到小于80%比例，scrollTop无法修改
m0_50015961的博客
10-29 599
chrome浏览器窗口缩小到小于80%比例，scrollTop无法修改
1024快乐！浅谈scrollTop需要踩的坑
flitrue的博客
10-24 522
对于没有实战过的同学来说，scrollTop使用起来会有一些小坑，今天借着1024节帮大家填一下坑。
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
11-23
最近在做博客的目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。 在此之前先说一下关于页面元素的坐标获取，这张图的经典性不必再提。  实现滚动到某位置功能 ...
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
11-23
最近做了个项目，其中有一目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。 在此之前先说一下关于页面元素的坐标获取，这张图的经典性不必再提。 实现滚动到...
解决vue单页路由跳转后scrollTop的问题
10-18
今天小编就为大家分享一篇解决vue单页路由跳转后scrollTop的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 496
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
最新发布
qq_39947980的博客
04-27 953
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 164
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1200
vue2,vuex,vant组件库
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 389
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
通过scrollTop进行滚动导致内存泄漏，如何优化解决
06-10
使用scrollTop进行滚动可能会导致内存泄漏，因为它会在DOM树中创建大量的文档碎片和重排，从而导致浏览器内存占用过高。为了解决这个问题，可以使用以下方法进行优化： 1. 使用虚拟滚动：虚拟滚动只会渲染可见区域...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值