提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

杂谈一：前端设置绝对定位后滚动条失效的解决办法

定位前端 设置 解决办法 失效 滚动条 绝对 杂谈
2023-06-13 09:16:15 时间

问题

微信小程序开发中为父元素设置背景图，子元素不能滚动

公共css样式

<style>
	.fu{
  	background:url("https://xxx.png");
  	width:100%;
  	height:100vh;
  	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: -999;
	position: fixed;
  	}
  .zi{
  	width:70%;
  	height:120vh;
  	background:red;
  }
</style>

错误示例

<view class="fu">
  <scroll-view class="zi"></scroll-view>
</view>

解决方案

<view class="fu"></view>
<scroll-view class="zi"></scroll-view>

问题分析

子元素继承父元素属性，导致背景绝对定位无法滑动！

相关文章