绝望的scroll-view不滚动和⾼度设置⽆效问题合集
各位如果也有被弄到怀疑⼈⽣的话可以⼀看，如果没有到此程序的话继续左捣捣右弄弄吧，莫许⼀下就正常了的。
⽬前碰到scroll-view相关的问题⼀般都可以直接定位到没设置⾼度（或宽度），要么是设置了⽆效。
如果是没设置⾼度或宽度还好说，直接设置个差不多的⾼度就搞惦了，最怕的就是设置后⽆效，还死活看不出来原因。
⽐⽅说像我，硬是要冒天下之⼤不韪作死设置了scroll-view的百分⽐⾼度%，然后就死了——⾼度⽆效，⽆法滚动。但这种百分⽐写法硬是很常见，很有需求呀，像下⽅这种布局的绿⾊部分就需要按⽐例写成活的。
所以在⽹上看了圈，⼤家要么就是⽤Js计算也来或是直接写死成px来解决，要么就是直接让背锅——这是⼤Bug，就是不能设置百分⽐⾼度，否则⽆效，不信你试……
因为之前有解决过这个问题的先例，我也在思考为什么会出现有的地⽅可以⽤百分⽐有效⽽有的地⽅不可以，在看到@⽩屏写的《⼩程序scroll-view垂直滚动下设置⾼度问题》这篇⽂章的时候给了我⼀些思路，然后我想scroll-view也是view的⼀类，其实就是Dom中的div元素，那么div有没有此问题呢？然后问题就迎刃⽽解了。
问题出在给元素设置百分⽐⾼度时要制定⽗布局⾼度，否则就会出现百分⽐⾼度⽆效的问题。
具体参看后⾯的附⽂。
附⽂：参考另外⼏种⽅法：
⼀、简单粗暴的JS⼤法：
⼩程序scroll-view组件⾃适应不同⾼度的⼿机
已知相⽐于H5开发有rpx这个单位可以⾃适应⼀些不同宽度的⼿机，但是有的时候需要⾃适应⼀些⼿机⾼度贼⼤的⼿机⽐如iphoneX系列所以scroll-view的wxss样式⾥肯定不能写死，我能想到的⽅法就是js⾥头加载画⾯前再设置⾼度
margin属性值可以为百分比wxml⾥
```
<scroll-view scroll-y style='height:{{scroll_height}}rpx'>
// ⼀些标签
</scroll-view>
```
js
```
Page({
data: {
scroll_height: 0,
}
})
onLoad: function (options) {
let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的⾼度
let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
this.setData({
scroll_height: windowHeight * 750 / windowWidth - (本页⾯除了scroll以外其他组件的⾼度rpx) - 30
})
},
```
根据屏幕的宽⾼计算出屏幕⾼度的rpx值，减去其他组件的⾼度得出scroll⾼度
⼆、⼩程序scroll-view垂直滚动下设置⾼度问题
三、给div设置height:100%;
```
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>div⾼度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
background-color:#c7c7c7;
}
</style>
</head>
<body>
<div class="nav">
divdivdiv
</div>
</body>
</html>
```
可div并没有按照所想的那样展开，但将div设置固定⾼度时能够正常展开，这是什么原因?
经过查资料后，在给元素设置百分⽐⾼度时要制定⽗布局⾼度。正常情况下最外层的⽗布局是根据内容来确定的，正如上图，div的⾼度是
21px。html的⾼度也是21px。既然知道问题原因后，那下⾯的事情就好办了。解决⽅法⼀：
给外层设置⾼度为：100%
```
<!DOCTYPE html>
<html >
<head>
<meta charset=utf-8>
<title>div⾼度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
background-color:#c7c7c7;
}
</style>
</head>
<body >
<div class="nav">
divdivdiv
</div>
</body>
</html>
```
解决⽅法⼆：
```
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>div⾼度</title>
<style>
*{margin:0;padding:0}
.nav{
width:200px;
height:100%;
position:fixed;
background-color:#c7c7c7;
}
</style>
</head>
<body>
<div class="nav">
divdivdiv
</div>
</body>
</html>
```
可能会疑问为什么要⽤position:fixed。先看下W3C⼿册怎么说的吧~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。