移动端position:fixed滑动问题

最新推荐文章于 2022-09-13 10:42:15 发布
原创 最新推荐文章于 2022-09-13 10:42:15 发布 · 5.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#手机 #滑动

本文介绍了一种解决移动端页面头部使用position:fixed时跟随滚动的问题。通过将position:fixed和overflow:scroll属性分别应用于不同的div元素，可以有效避免头部跟随滚动的现象。

前提

在任务中需要我在页面上使用position：fixed 和 overflow：scroll 这两个属性，结果在手机端出现头部也跟着滑动的现象。那么怎么来处理这个现象呢？

解决办法

分别把position：fixed 和 overflow：scroll 两个属性分开到两个box中。

<div style=" overflow : scroll">
     <div style="position:fixed"></div>
</div>

这样就会出现这个现象所以要把两个属性分开

 <div style="position:fixed"></div>
<div style=" overflow : scroll"></div>
iOS中position:fixed吸底时的滑动出现抖动的解决方案
pretty sunshine
06-29 1万+
两种抖动 为什么抖动还会有两种？ 其实是我碰到过两种抖动的场景，第一个场景是native的抖动，第二个场景是h5的抖动。 native的抖动 前端开发人员会在app中打开webview，这个时候iOS中position:fixed吸底时的滑动出现抖动应该是native造成的抖动，整个viewport跟着动，所以可以在生成schema的时候将参数bounce_disable（可能不一定都...
关于body添加position:fixed会返回到网页顶部的问题
impossible1994727的博客
07-07 3764
做网页免不了遇到弹窗，遮罩层这些页面，当有遮罩层的时候需要禁止底层页面滑动，本来使用event.stopPropagation();阻止事件冒泡在安卓端就是可以实现的，但是在ios上这个并不起作用。 所以为了方便在弹出遮罩层的同时给body设置'position':'fixed';'top':'负的当前浏览器顶部距离页面顶部距离';此时，点击遮罩层的时候底层页面不动且页面位置正好；但是点击遮罩层
position fixed 在ios上滑动不固定问题
liuxiaoyu334433的专栏
03-12 4759
&lt;div&gt;    &lt;span&gt;内容&lt;/span&gt;&lt;!---按钮是position：fixed---&gt;    &lt;button style='position:fiexd'&gt;点击提交&lt;/button&gt;&lt;/div&gt;如果是上面的这种结构，如果内容过长，超出了手机的高度，页面往上或往下滑动的时候，按钮就会跟着页面滚动，原因是
微信小程序底部position:fixed布局产生滚动条
jyluwen的博客
02-16 1020
年后第一天上班，脑子都锈了。padding和margin都不明白了！今天写一个页面，底部固定定位，页面主要内容是列表循环，如果 列表项多的话，底部固定定位会遮挡住一部分内容！为了解决这个问题，我给最外层的&lt;view&gt;设置了paddiing-bottom值，但出现了 滚动条，左想右想想不出好的解决方法。后来给循环列表的层外面加了一个&lt;view&gt;层，并设置了padding-...
关于小程序使用position:fixed出现随屏幕滚动情况
weixin_41760500的博客
11-12 2434
在position:fixed 里加上这个样式完美解决 -webkit-transform: translateZ(0);
css 随滚动条固定浮动position:fixed;
webnoties的专栏
12-09 5053
css 随滚动条固定浮动position:fixed;"position:fixed " 是定位代码的。"!important" 是解决浏览器兼容问题的。（IE内核系列的浏览器）”-“ ‘*’ CSS前面加_或者 * 也是处理浏览器兼容问题的。 都是IE系列的浏览器兼容问题的。通常都是一起用的。例：.ask{margin-left:20px;_margin-left:10px;*ma
顶部固定不动 下部分滚动_如何彻底解决背景跟随弹窗滚动问题
weixin_39922534的博客
12-10 667
背景 在移动端使用弹窗时，我们会经常遇到这种现象：滑动弹窗时，遮罩层下面的背景(body)也会跟随滑动，带来的用户观感体验很差。市面上的解决方案大部分通过阻止touchmove默认事件执行event.preventDefault()解决，但是这种方案存在兼容性，不能对所有浏览器都有效，而且如果弹窗本身存在滚动(如活动规则弹窗)，这种解决方案并不能阻止背景滑动，如下图活动规则弹窗所示：终极...
Open WebUI移动端适配：优化与响应式设计全解
为了满足这些要求，开发者必须掌握移动端适配与响应式设计的基础知识。响应式设计，顾名思义，是一种能够适应不同屏幕尺寸的设计方法。其核心理念是通过灵活的布局、图像和媒体查询，使网页在不同设备上都能提供最佳...
【Layui移动端适配：确保表格事件流畅体验】：掌握移动端事件适配的秘诀
本文首先概述了移动端适配的重要性和基础理论，包括响应式设计、触摸事件处理以及性能优化的理论基础。随后，通过实践技巧的介绍，重点讨论了提升表格事件流畅体验的方法，如滚动性能优化和触摸事件
原生html5移动端网页侧滑栏滑动效果
06-04
设置`position: fixed`或者`absolute`可以让侧滑栏相对于屏幕定位，然后通过改变`transform: translateX()`值实现左右滑动的效果。例如： ```css #sidebar { position: fixed; width: 300px; transform: ...
position:fixed的情况下，下层div可以上下拖动的问题，可以添加点击事件，给body加上一个overflow:hidden来解决
foreverlikui的博客
03-20 935
关于position:fixed的情况下，下层div可以上下拖动的问题，可以添加点击事件，给body加上一个overflow:hidden来解决
[微信小程序]IOS系统中，存在固定定位(position:fixed)并一直滑动时会导致一直抖动问题解决方案
史喜超的博客
06-10 3607
page:{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } 将 page 也设置成固定定位即可
css fixed 元素下坠 元素脱离文档流 position: fixed；
qq_485114707的博客
08-04 730
如下图所示 给元素设置position: fixed; 起脱离文档流 虽然没设置bottom为0 但是自动贴到底了 经多方研究 得出解决办法 给父级添加transform: translateZ(0); 就行 这个父级最好是最顶级的 ...
position:fixed元素定位，如何不影响下面的布局
热门推荐
qq_44920883的博客
04-19 1万+
position:fixed；一般是用来定位头部导航栏，固定头部在最上方的位置，不会因为页面滚动产生影响 fixed是一个绝对定位的元素，是相对于整个浏览器窗口进行定位，相对定位一旦移动就会不占据原来的位置，后面的元素就会向上位移； 解决方法： 1.在fixed定位的元素最外面一层div，并设置一个相同的宽高(推荐使用) ```bash <style type="text/css"&gt...
定位
qq_43654065的博客
10-12 368
position：relative，相对定位，相对于盒子原来位置移动，元素设置此属性后仍然处于文档流中，不影响其他元素的布局。 position：absolute，绝对定位，元素脱离文档流，不占据文档位置，漂浮在文档流上方，相对于上一级设置了相对/绝对/固定定位的父级元素进行定位，如果找不到则相对于body定位。 position：fixed，固定定位，脱离文档，相对于浏览器窗口进行定位。 position：static，默认值，会忽略上、下、左、右设定的px和z-index。 position：inher
微信小程序：position: fixed导致的滚动时页面元素不跟着动的问题
IT老五
05-30 4555
由于对js的不熟悉，花了近半个小时才解决这个问题，现在记录下： 项目需要如上图所示的一个列表页面，唰唰唰…没花多长时间就完成了,在元素较少时，不需要滚动，使用一切正常； 后来添加了更多的item后，页面需要滚动，但是滚动的效果感觉莫名其妙，如下图： OMG？？？居然有部分元素不随着页面一起滚动…(ｷ｀ﾟДﾟ´)!!..一脸懵逼中… 没办法，有病得治，有Bug赶紧改…百度谷歌必应了一阵，后来...
固定定位哦
m0_58467224的博客
06-02 178
固定定位
顶部导航栏fixed布局右侧不出现滚动条
IT学霸
06-07 2209
一、正常情况 顶部导航栏使用fixed布局后，如果页面内容超出了屏幕高度，右侧是会出现滚动条的。效果如下： 蓝色区域是顶部的导航栏区域，可以看到右侧出现了滚动条。 二、CSS代码设置后 如何让滚动条只出现在导航栏下面的内容区域了？原理就是使页面body元素和html根元素的高度固定为屏幕的高度。整个页面内容就不会让浏览器自动显示整个页面的滚动条，而在页面内部，只会让需要滚动的页面元素出现滚动条。 这种情况下，顶部导航栏只要宽度设置为100%，计算出来的宽度就是不包含滚动条的宽度值(假如屏幕宽度
position:fixed 造成页面抖动解决办法
_NIXIAKF的博客
09-13 1493
position:fixed 造成页面抖动解决办法
ios移动端左右上下同时滑动导致页面留白问题
最新发布
08-09
在 iOS 移动端开发中，当页面支持左右和上下同时滑动时，可能会出现页面留白问题。这种现象通常与 `overflow` 层级滚动、iOS 的 `position: fixed` 行为、以及 `-webkit-overflow-scrolling: touch` 的兼容性有关。以下是详细的解决方案和实现方式。 ### 使用 `position: absolute` 与 `overflow: scroll` 组合 在 iOS 的 WebView 中，`overflow: scroll` 与 `position: fixed` 结合使用可能导致滚动区域失效或出现留白。推荐将外层容器设置为 `position: absolute`，并结合 `overflow: scroll` 来实现更稳定的滚动行为。 ```css .container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll; -webkit-overflow-scrolling: touch; } ``` 这种方式可以避免页面在滑动时因布局重排而产生空白区域，尤其适用于需要同时支持横向和纵向滚动的容器。 ### 避免嵌套 `overflow: scroll` 层级 iOS 的 WebView 对嵌套滚动支持不佳，容易导致滚动区域失效或出现空白。建议将滚动行为集中在一个容器内，避免多个 `overflow: scroll` 元素嵌套。 ```css .scroll-container { overflow: scroll; -webkit-overflow-scrolling: touch; white-space: nowrap; } ``` ### 动态重置滚动位置 在页面切换或软键盘弹出收起时，iOS 可能会保留之前的滚动状态，导致页面留白。可以通过 JavaScript 强制重置滚动位置： ```javascript window.scrollTo(0, 0); document.querySelector('.scroll-container').scrollTop = 0; ``` 也可以在路由切换后统一处理： ```javascript router.afterEach((to, from) => { window.scrollTo(0, 0); const container = document.querySelector('.scroll-container'); if (container) { container.scrollTop = 0; } }); ``` ### 使用 `transform` 替代 `position: fixed` 在 iOS 中使用 `position: fixed` 定位的元素在页面滚动时可能出现错位或空白。可以考虑使用 `transform` 实现固定定位效果： ```css .fixed-element { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } ``` 这样可以避免 iOS 对 `position: fixed` 的特殊处理，提升页面滚动的稳定性。 ### 避免 `flex` 布局嵌套滚动 iOS 中 `flex` 布局嵌套 `overflow: scroll` 可能导致滚动区域高度异常或出现空白。建议将滚动容器设置为固定高度，并结合 `overflow: scroll` 使用： ```css .scroll-wrapper { display: flex; flex-direction: column; height: 100vh; } .scroll-content { flex: 1; overflow: scroll; -webkit-overflow-scrolling: touch; } ``` ### 处理软键盘弹出导致的页面滚动 在 iOS 中，软键盘弹出可能会导致页面整体上移或出现空白。可以通过监听 `focus` 和 `blur` 事件动态调整页面布局： ```javascript window.addEventListener('focusin', () => { document.body.classList.add('keyboard-open'); }); window.addEventListener('focusout', () => { document.body.classList.remove('keyboard-open'); }); ``` 配合 CSS： ```css .keyboard-open { height: 100%; overflow: hidden; } ``` 这种方式可以在软键盘弹出时锁定页面高度，避免因页面缩放导致的留白问题。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值