微信小程序底部position:fixed布局产生滚动条

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

#小程序

年后第一天上班，脑子都锈了。padding和margin都不明白了！今天写一个页面，底部固定定位，页面主要内容是列表循环，如果

列表项多的话，底部固定定位会遮挡住一部分内容！为了解决这个问题，我给最外层的<view>设置了paddiing-bottom值，但出现了

滚动条，左想右想想不出好的解决方法。后来给循环列表的层外面加了一个<view>层，并设置了padding-bottom值，两个问题就都解决了。既没有滚动条，也没有遮挡住。完美！

子蹊
关注
pc端官网类(fixed)固定导航栏，屏幕缩小导航栏被遮住解决办法
郝峰vip的博客
11-11 1547
前言 最近也是接受一个不知道经历过几代人写的项目，一个后台系统，一点响应式也没有，只能自己加，在写到响应式固定导航栏的时候发现当缩小浏览器或者在小屏幕出现滚动条时，固定的导航栏被遮住了，于是乎就开始找办法解决，幸好最终解决了。 思路 监听浏览器的scrollLeft，拖动多少就让固定的导航栏移动多少，就适配了，自己亲自写的，非常好用。 我这里用的vue脚手架所以是在Vue项目里边的，导航栏是公共的组件，所以方法写在该组件内了，不过方法是通用的，最后需要在组件销毁时移除监听事件，否则在别的页面会
微信小程序使用 ==== 粘性布局
每天都要努力学习哦~~
09-14 2322
单词sticky的中文意思是“粘性的”，表现也符合这个粘性的表现。基本上，可以看出是和的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。例如，可以滚动下面这个框框感受下交互表现：其中导航元素设置了如下CSS：nav {top: 0;于是，正如大家看到，随着页面的滚动，当导航距离上边缘0距离的时候，黏在了上边缘，表现如同。
position:fixed;滚动条
xiaoxiao_xiaoliu的专栏
03-09 2352
滚动条 对于position:fixed;如果使用overflow:auto;会导致的问题： 底层滚动到最底部，当前层的滚动效果才能出现。 可以对其下层设置position:absolute;或者 position:relative;之后设置overflow:auto;
微信小程序导航栏终极对决：顶部VS底部！看完秒懂怎么选
最新发布
weixin_45917851的博客
06-11 1112
启用自定义模式在app.json中设置："window": {获取关键尺寸（状态栏高度+胶囊位置）在app.js中计算：App({// 导航栏高度 = 状态栏高度 + 胶囊高度 + 上下间距*2},})创建自定义组件（如组件WXML：<!" > <!-- 左侧返回按钮 --> < view class = " back-btn " bindtap = " handleBack " > ⬅ </ view > <!
微信小程序-顶部或底部固定，中间内容可以滚动
热门推荐
ChibiMarukoChan的博客
11-05 1万+
1.顶部固定 &lt;view class="top" style="width:100%;height:80px;border-top:1px solid red;background-color:#f0f0f0;position:fixed;top:0;"&gt; 顶部固定 &lt;/view&gt; 2.底部固定 &lt;view class="bottom" style="wi.
使position:fixed样式水平滚动的方法
风轻云淡
02-19 7090
版权所有，转载请注明出处：http://guangboo.org/2013/09/19/horizontal-scrollable-for-position-fixed 使用CSS样式"position:fixed"可以使div块固定在一个固定位置，即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果，然而当出现水平滚动条时，效果就不那么容易接受了。有时候我们希
关于小程序使用position:fixed出现随屏幕滚动情况
weixin_41760500的博客
11-12 2395
在position:fixed 里加上这个样式完美解决 -webkit-transform: translateZ(0);
uniapp 微信小程序底部position: fixed;空白
01-08
### 解决 UniApp 开发微信小程序时底部 `position: fixed` 出现空白的问题 在开发过程中遇到底部固定定位出现空白的情况，通常是因为不同平台渲染机制存在差异。对于这个问题，可以通过调整样式设置来实现更好的...
解决微信小程序中的滚动穿透问题
12-13
解决滚动穿透问题的方法通常分为两种情况，根据蒙层是否包含滚动条： 1. **无滚动条的蒙层**： 在蒙层没有滚动条的情况下，可以通过监听并阻止`touchmove`事件来防止底层内容滚动。在WXML中，可以添加`catch:...
微信小程序，新添加的元素保持在底部
03-29
总结来说，实现微信小程序中元素保持在底部的布局，需要结合WXML、WXSS以及JavaScript来完成。要确保元素通过CSS的`position: fixed;`属性固定在页面底部，并结合其他布局技巧处理不同屏幕尺寸适配以及可能出现的...
微信小程序4-内容溢出滚动条
musi35221的博客
12-04 946
动物觅踪，微信小程序，内容溢出，滚动条，水平滚动条，竖直滚动条，隐藏滚动条，滚动条问题
微信小程序上下固定，中间滚动，使用position:fixed遮挡正文
Wangyt_0028的博客
11-01 5697
问题：页面布局需要固定上下部分，使用position:fixed布局，发现会遮挡中间滚动部分。 解决：给中间部分加padding-top和padding-bottom，高度分别为上下固定部分的高度。  ...
[TimLinux] JavaScript position为fixed时支持水平滚动条
weixin_30379531的博客
06-09 236
1. 固定定位 position: fixed;设置好之后，元素在浏览器窗口中的位置就固定住了，这个时候，不论是水平移动滚动条，还是垂直移动滚动条，元素是打死都不会动的。 但是当用fixed定位的元素，作为header部分的时候，浏览器窗口一旦缩小了，不让移动，那就会导致右侧的导览看不到也点不到了，比如“登录”按钮，这个时候大家就想骂娘了，然后骂娘并没有卵用。 2. onscroll事件 ...
微信小程序-去除页面滚动条
jack00809的博客
03-07 6753
实现代码是 /* ::-webkit-scrollbar { width: 0; height: 0; color: transparent; display: none; } */ 但是今天使用的时候突然不能生效了，之前是可以的。 研究了一下，发现没有给父级元素设置属性。 .store-page { //父元素 width: 100vw; height: 100vh; overflow-x: ...
css 随滚动条固定浮动position:fixed;
webnoties的专栏
12-09 5015
css 随滚动条固定浮动position:fixed;"position:fixed " 是定位代码的。"!important" 是解决浏览器兼容问题的。（IE内核系列的浏览器）”-“ ‘*’ CSS前面加_或者 * 也是处理浏览器兼容问题的。 都是IE系列的浏览器兼容问题的。通常都是一起用的。例：.ask{margin-left:20px;_margin-left:10px;*ma
解决div用了position: fixed后滚动条显示不完整的问题
qq_38472574的博客
08-07 1490
解决div用了position: fixed后滚动条显示不完整的问题
html的position属性,css position属性学习
weixin_34618526的博客
06-04 211
标签：css position 属性首先准备一下测试的html代码：1,absolute:中文意思为绝对的，生成绝对定位的元素，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。1 .one{2 position: absolute;3 width: 500px;4 ...
css解决fixed布局不会出现滚动条
全栈修炼
06-22 8014
css解决fixed布局不会出现滚动条的问题如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置： width: 100%; height: auto; z-index: 9999999; background: #fff; padding-bottom: 1rem; position: fixed; top: 0; overflow-y: scroll;...
【CSS】IE6中的position：fixed问题与随滚动条滚动的效果
编程记录，亲测有效
10-22 1848
上次在《【jQuery】兼容IE6的滚动监听》（点击打开链接）提及到解决IE6fixed问题，具体是要引入一个js文件，还要声明一条脚本就为这个div声明fixed定位去解决，起始这样很不好啊。引入的Javascript不好管理之余，还要在head声明引入javascript，之后又要给这个div声明一个id，之后又要在脚本出弄一条声明，实在是烦死了。 使用position：fixed无非是想做
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值