首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我在chrome手机中向下滚动时,绝对定位的DIV会改变位置,如何解决这个问题?

当在Chrome手机中向下滚动时,绝对定位的DIV改变位置的问题可能是由于浏览器的滚动行为引起的。为了解决这个问题,可以尝试以下几种方法:

  1. 使用CSS属性position: fixed替代position: absolute:将绝对定位的DIV的CSS属性position改为fixed,这样它将相对于浏览器窗口而非滚动容器进行定位。这样即使滚动容器滚动,该DIV的位置也会保持不变。
  2. 使用JavaScript监听滚动事件并更新位置:通过JavaScript监听滚动事件,当滚动发生时,动态更新绝对定位的DIV的位置。可以使用window.addEventListener('scroll', function(){})来监听滚动事件,并在事件处理函数中更新DIV的位置。
  3. 使用CSS属性transform: translateZ(0)提升性能:在绝对定位的DIV的CSS中添加transform: translateZ(0)属性,这样可以触发GPU加速,提高滚动时的性能,可能会减少位置变化的问题。
  4. 检查其他CSS属性和样式:确保绝对定位的DIV没有受到其他CSS属性或样式的影响,例如父元素的overflow属性、其他相邻元素的布局等。

需要注意的是,以上方法是一些常见的解决方案,但具体解决方法可能因具体情况而异。在实际应用中,可以根据具体情况选择适合的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

这一次,彻底解决滚动穿透

首先,一般而言滚动不是我们自己监听事件去改变元素位置而实现当我们设置 overflow:scroll/auto,实际上是浏览器原生实现滚动效果。...我们可以加入 overflow:hidden同时选择性做: 将 html,body高度设置为 100% 将 html,body设置为绝对定位 这两个操作都可以完美地禁止整个body滚动,但带来最大问题是...: 该方案会让浏览器滚动条默认重置于初始位置解决这个问题,首先想到方案是添加 overflow之前,先记录当前浏览器 scrollTop值,然后添加之后重置 scrollTop,效果如下:...(请注意蒙层出现时,底部列表发生变化) 在这个交互过程,浮层弹出,底部列表首先滚动条被置为初始态,关闭浮层后重置为之前记录位置。...,看起来滚动穿透问题得到了完美的解决,但是: 当多个浮层同时存在滚动穿透将再次触发 支持多浮层 之所以会出现多浮层问题,是因为我们往 document上绑事件只绑一次,这个是对,但是每个浮层关闭时候都会触发

2.7K21

五. css 布局之 position(定位

则开启了元素相对定位 相对定位特点: 1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何变化 2.相对定位是参照于元素文档流位置进行定位 3.相对定位会提升元素层级 4.相对定位不会使元素脱离文档流...1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何变化 2.相对定位是参照于元素文档流位置进行定位...> 2.绝对定位 当元素position属性值设置为absolute,则开启了元素绝对定位 绝对定位特点: 1.开启绝对定位后,如果不设置偏移量元素位置不会发生变化 2.开启绝对定位后,元素会从文档流脱离...1.开启绝对定位后,如果不设置偏移量元素位置不会发生变化 2.开启绝对定位后,元素会从文档流脱离 3.绝对定位会改变元素性质...> 4.粘滞定位 ​ 当元素position属性设置为sticky则开启了元素粘滞定位 粘滞定位和相对定位特点基本一致, 不同是粘滞定位可以元素到达某个位置将其固定 <!

2.2K41
  • 2021前端面试高频 HTML + CSS

    前言 ❝ 我是从5月旬裸辞,其实在裸辞,我已经拿了3个 北京 offer ,都是远程面试,过程还算可以。 我是不太喜欢北京这个城市,后来都放弃了。...❞ relative 相对定位 ❝元素会放置定位位置,不改变原有布局,通过改变 top, right, bottom, left 来改变所在位置,但原所在位置会留下预留空间。...❞ fixed 固定定位 ❝元素会「脱离文档流」,不会预留原有位置空间。 元素包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕仍固定在相同位置元素。...元素位置屏幕滚动会改变。 ❞ sticky 粘性定位 ❝元素根据正常文档流进行定位,然后相对它最近滚动祖先 和 最近块级祖先 。...手机端适配可以采用 rem rpx rpx 是微信小程序解决自适应屏幕尺寸尺寸单位。微信小程序规定屏幕宽度为750rpx。 ❞ END

    94040

    前端如何实现高性能表格?

    单元格使用 DIV 绝对定位 即每个单元格都是用绝对定位 DIV 实现,整个表格都是有独立计算位置 DIV 拼接而成: 这样做前提是: 所有单元格位置都要提前计算,这里可以利用 web worker...如图所示有 16 个单元格,当我们向右下滑动一格,中间 3x3 即 9 个格子区域是完全不会重新渲染,这样零散绝对定位分布可以最大程度维持单元格本来位置。...模拟滚动,实际上整个表格都是 overflow: hidden ,浏览器就不会给出自带滚动条了,我们需要用 DIV 做出虚拟滚动条代替,这个相对容易。...当我们把 Buffer 区域移除,发现整个屏幕内渲染单元格 1000 个以内,现代浏览器甚至配合 Windows 都能快速完成滚动前刷新,并不会影响滚动流畅性。...公众号:前端食堂 知乎:童欧巴 掘金:童欧巴 这是一个终身学习男人,他坚持自己热爱事情,欢迎你加入前端食堂,和这个男人一起开心胖~ “如果你觉得读了本文有收获的话可以点个在看让我看到。

    3.5K10

    大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    五、盒子模型 网页布局,我们是如何把里面的文字,图片,按照美工给我们效果图排列整齐有序呢? ? 其实网页布局本质就是: 首先利用CSS设置好盒子大小,然后摆放盒子位置。...为了解决这个问题,大概有以下几个方案: 可以为父元素定义上边框。 可以为父元素定义上内边距。 可以为父元素添加overflow:hidden。...7.3.2、相对定位(relative) 相对定位是元素相对于它原来标准流位置来说。他有两个特点: 相对定位是相对于自己原来标准流位置来移动。...原来标准流区域继续占有,后面的盒子仍然以标准流方式对待它。 7.3.3、绝对定位(absolute) 绝对定位是元素以带有定位父级元素来移动位置,也就是我们常说拼爹。...浏览器可视窗口 + 边偏移属性 来设置元素位置; 跟父元素没有任何关系;单独使用 不随滚动滚动

    1.8K20

    CSS Position 定位

    #2.2 position: relative 该关键字下,元素先放置未添加定位位置,再在不改变页面布局前提下调整元素位置(因此会在此元素未添加定位所在位置留下空白)。...绝对定位元素可以设置外边距(margin),且不会与其他边距合并。 生成绝对定位元素,其相对于 static 定位以外第一个父元素进行定位,会脱离normal flow。...#2.4 position: fixed 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)位置来指定元素位置。元素位置屏幕滚动会改变。...在所有情况下(即便被定位元素为 table),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位,后续元素位置仍按照 B 未定位位置来确定。...因为各大浏览器对于sticky兼容问题,而且JS也可以实现这个功能,在这里就不进行深入了,了解一下就好。

    1.1K10

    爬虫问题二:处理js异步加载问题

    前言 新闻网站中大多采用是异步加载模式,新闻条目会随滚动滚动而逐渐加载。当爬虫访问这类网站得到HTML数据仅仅是我们看到页面数据,只有当我向下滚动,网页源代码才会同步更新。...例如:腾讯新闻,处理这类JS异步加载问题,这里用selenium来解决。...("https://new.qq.com/ch/milite/") 如果程序执行错误,浏览器没有打开,那么应该是没有装 Chrome 浏览器或者 Chrome 驱动没有配置环境变量里。...下载驱动,然后将驱动文件路径配置环境变量即可。...(jsCode) 休息3秒,从JS异步加载完成到新闻页面的更新需要一些时间 time.sleep(3) 进行标签定位定位到class="item-pics"标签 div = driver.find_elements_by_class_name

    3K50

    CSS 你需要知道 auto 一切!

    这使元素相对于包含块边缘水平居中。 ? 具有绝对定位元素 margin:auto ? 另一个不太常见绝对定位元素居中用例是margin: auto。...当我们有一个元素应该在它父元素内部水平和垂直居中,我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中: 设置宽度和高度。...overflow 属性 当我们有一个元素,我们应该考虑它应该包含最小和最大内容。如果内容超过了最大值,那么我们需要显示一个滚动条。... Chrome 窗口中,滚动条总是显示出来,这是不正确和令人困惑行为。 通过使用auto关键字,我们可以确保滚动条不会显示,除非内容高度大于它容器。 根据MDN: 取决于用户代理。...接下来我要解释是对我来说是新,我研究本文学到了它。 考虑下面的模型: ? 我们有一个有内边距 wrapper 元素,还有一个子项。子项目是绝对定位,但没有任何定位属性。

    5.3K30

    不受控制 position:fixed

    大家都知道,position:fixed 日常页面布局中非常常用,许多布局起到了关键作用。...它作用是: position:fixed 元素将相对于屏幕视口(viewport)位置来指定其位置。并且元素位置屏幕滚动会改变。...说好相对视口(Viewport)定位呢? 这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文概念了。...上面也谈到了,上述结论是最新 Chrome 浏览器下(Blink内核),经过测试发现, MAC 下 Safari 浏览器(WebKit内核,Version 9.1.2 (11601.7.7))和...或者是 position: fixed 中使用了 input 也会存在一些问题这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题

    2.2K40

    CSS粘性定位 - 它真正工作原理!

    当它正常工作,元素会"粘"定位置,但在滚动其他部分,它又会停止"粘"住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题根本原因,所以决定深入研究sticky定位。...Stick 探索 尝试使用 sticky 定位过程,我很快发现,当一个具有sticky定位样式元素被包裹起来,并且它是包裹元素内唯一元素这个被定义为sticky定位元素并不会"粘"住。..."> SOME CONTENT 当我包裹元素内添加更多元素,它开始正常工作了。...Absolute 定位 - 粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素 position: relative 容器内行为一样。 贴在底部?...这意味着可以定义页脚具有粘性位置,并且向下滚动始终会出现粘在底部。当我们到达粘性容器末尾,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素。

    28720

    Chrome 115 有哪些值得关注新特性?

    今天带大家一起来了解一下 Chrome 115 值得关注新特性。 滚动动画 用滚动驱动动画是网站上非常常见用户体验模式,比如当页面向前或向后滚动,对应动画也会向前或向后移动。...: Scroll Progress Timeline: 链接到滚动容器沿特定轴滚动位置时间线。...只有当 display 值改变,子元素才会成为 Grid 或 Flex 元素,并开始响应 Grid 或 Flexbox 规范其他属性。...外部 display 类型描述元素是块级还是内联,内部显示类型描述容器子元素应该如何表现。 因此,display 多关键字语法允许分别指定内外两个 display 类型。...而这个新语法也会向后兼容以前单关键字语法。 Fenced Frames 很多业务场景,我们可能会使用 iframe 去嵌入一些智能推荐广告。

    36731

    104道 CSS 面试题,助你查漏补缺(上)

    如何兼容低版本 IE?(待深入了解)[45] 46.视差滚动效果,如何给每页做不同动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)...fixed(老IE不支持) 生成绝对定位元素,相对于浏览器窗口进行定位。 relative 生成相对定位元素,相对于其元素本身所在正常位置进行定位。 static 默认值。...这句话 我们可以这样来理解,我们首先需要找到绝对定位元素一个position值不为static祖先元素,然后相对于这个祖先元 素padding box来定位,也就是说计算定位距离时候,padding...(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?) 视差滚动是指多层背景以不同速度移动,形成立体运动效果,带来非常出色视觉体验。 详细资料可以参考:《如何实现视差滚动效果网页?》...: #46视差滚动效果如何给每页做不同动画回到顶部向下滑动要再次出现和只出现一次分别怎么做 [47] 47.如何修改 chrome 记住密码后自动填充表单黄色背景?

    2.1K10

    57道CSS常问面试题及答案汇总

    static(默认):按照正常文档流进行排列; relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位; absolute(绝对定位):...兼容性问题IE5 IE6,为float盒子指定margin,左侧margin可能会变成两倍宽度。通过改变padding或者指定盒子display:inline解决。...其实我们都知道,谷歌Chrome最小字体是12px,不管你设置成8px还是10px,浏览器只会显示12px,那么如何解决这个坑爹问题呢?...36、CSS属性overflow属性定义溢出元素内容区内容会如何处理? 参数是scroll时候,必会出现滚动条。 参数是auto时候,子元素内容大于父元素出现滚动条。...1px问题(1像素边框问题) 移动端web开发,UI设计稿设置边框为1像素,前端开发过程如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典 移动端1px像素问题

    2K10

    57道常被问CSS面试题及答案汇总,帮你查漏补缺

    static(默认):按照正常文档流进行排列; relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位; absolute(绝对定位):...兼容性问题IE5 IE6,为float盒子指定margin,左侧margin可能会变成两倍宽度。通过改变padding或者指定盒子display:inline解决。...其实我们都知道,谷歌Chrome最小字体是12px,不管你设置成8px还是10px,浏览器只会显示12px,那么如何解决这个坑爹问题呢?...36、CSS属性overflow属性定义溢出元素内容区内容会如何处理? 参数是scroll时候,必会出现滚动条。 参数是auto时候,子元素内容大于父元素出现滚动条。...1px问题(1像素边框问题) 移动端web开发,UI设计稿设置边框为1像素,前端开发过程如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典 移动端1px像素问题

    2.6K31

    你会用到 15个前端小知识

    滚动轨道两端按钮,允许通过点击微调小方块位置 div::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去 div::-webkit-scrollbar-corner...边角,即两个滚动交汇处 div::-webkit-resizer 两个滚动交汇处上用于通过拖动调整元素大小小控件注意此方案有兼容性问题,一般需要隐藏滚动我都是用一个色块通过定位盖上去,或者将子级元素调大...6.解决 ios audio 无法自动播放、循环播放问题 ios 手机使用 audio 或者 video 播放时候,个别机型无法实现自动播放,可使用下面的代码 hack。...9.前端工程化 一提到前端工程化很多人想到都是 webpack,这是不对,webpack 仅仅是前端工程化一环。整个工程化过程他帮我们解决了绝大多数问题,但并没有解决所有问题。...用法如下,通过 new 方式创建对象,第一个参数是被拦截对象,第二个参数是对象操作描述。实例化后返回一个新对象,当我们对这个对象进行操作就会调用我们描述对应方法。

    92910

    scroll-behavior & scrollIntoView 使用,以及解决ios手机不兼容问题

    前言 平时日常开发,我们可能会遇到这样需求,点击一个导航链接,页面会定位到一个元素或上去。如下图vue官网所示,我点击左侧导航栏链接,右边会定位到相应位置。...根元素中指定这个属性,它反而适用于视窗。...但有的时候,我们就是想要ios手机也能兼容平滑滚动效果,对此,我们可以使用jsscrollIntoView和smoothscroll-polyfill插件解决问题。...缺点 它缺点主要还是兼容性问题,兼容性也不是很好,浏览器兼容性如下: ios手机上,一样会没有平滑滚动效果.但是,我们可以借助一个第三方插件,能够使ios手机支scrollIntoView平滑滚动效果...手机上看看实现效果,效果如下: 以上就是关于cssscroll-behavior属性和jsscrollIntoViewAPI使用方法,以及如何解决ios手机兼容性问题

    3.2K10

    【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

    一、固定定位概念语法 ---- 固定定位 是 固定在屏幕某个位置 , 即使拖动滚动条 , 固定定位元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局位置 , 漂浮在任何元素上方...固定定位元素 始终显示浏览器可视窗口定位置 , 不会改变 ; 注意相对是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位 本质是一种 特殊绝对定位 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码基础上 , 将中心标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动滚动 ;...div> 展示效果 : 默认进入后样式 : 滚动拖动条后效果 :

    1.8K20

    超全整理前端开发面试题——CSS篇(2016年)

    如何居中一个浮动元素?如何绝对定位div居中?...relative 生成相对定位元素,相对于其正常位置进行定位。 static 默认值。...视差滚动效果,如何给每页做不同动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?) ::before 和 :after双冒号和单冒号 有什么区别?解释一下这2个伪元素作用。...(携程) 移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing overflow: scroll不能平滑滚动问题怎么处理?...- 后处理器例如:PostCSS,通常被视为完成样式表根据CSS规范处理CSS,让其更有效;目前最常做是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性问题

    2.6K130

    开发 h5| Hybrid | 微信小程序 | 实践踩坑总结十六条

    安卓手机正常,但是ios手机出现,滑块抖动问题,图片会出现闪动效果。这个问题困扰了很久,网上搜索了大量解决方案,都没有实际解决问题,自己也尝试了几种方法,也没有成功,当时很奔溃???...( 能够从根本上解决偶尔跳屏问题,但是随之而来就是ios 滚动问题,基于document才能有效触发,遂放弃此方案) ④ 不改变布局情况下,由fixed 定位,改成absolute定位滚动条基于...: touch 卡住不动问题 背景 ios页面向上向下滑动过程,会出现卡顿,不流畅现象,具体问题如下: 1 safari上,使用了-webkit-overflow-scrolling:touch...解决方案 针对这个抖动问题解决方案也是很简单,我们把定位元素从scroll-view拿出来。就能根本解决这个问题。...③ 如何用canvas绘制,多行文本? ④ 如何根据设计稿,精确还原海报各个元素位置问题。 ⑤ canvas怎么绘制base64图片?

    2.5K30

    CSS入门指南-3:定位元素

    现在,第三段从原来元素(body)挣脱了出来,与它在文档默认位置相比向下移动了25像素,向右移动了30像素。 需要注意是,除了这个元素自己相对于原始位置挪动了一下以外,页面没有任何改变。...例如,top设置一个值“20px”一个相对定位元素上,这个元素会在原来位置向下移动“20px”。...固定页头和页脚 固定定位最常见一种用途就是页面创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器滚动条,还是会固定在页面。 现在我们来看下定位上下文。...这里内部和外部 div 都是是静态定位,不存在谁是谁定位上下文这个问题,所以 top 和 left 属性并没有生效。 下面我们把内部 div 设定为绝对定位,来看一下变化。...块级元素:比如段落、标题、列表等,浏览器中上下堆叠显示。 行内元素:比如 a、span、和 img,浏览器左右并排显示,只有前一行没有空间才会显示对下一行。

    64510
    领券