今天在做一个律师小程序开发时，在修改scroll-view组件之后，发现之前的scroll-into-view的跳转失效了
之前的页面是一直正常的，所以官方的关于scroll-view的一些tips是不会关联了
tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
再仔细看官方的说明，发现有这么一句
使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。
当前我的页面的scroll-view是能滚动的，不过说不定问题可能出在这里，因为高度设定的100%
先尝试着手动把scroll-view改成一个比较小的高度，再试试调整scroll-into-view的值，发现可以了，那问题就出在height上了。
原因
旧版本里面navBar是系统自带的，设置height: 100%是能正确展示。
新版本里面，在app.json里面配置了navigationStyle: 'custom'，然后配置了一个自定义样式的导航栏。在调整样式的时候，让内容区域margin-top: 128px;，这样就不会跟自定义的navBar冲突。
问题应该就出在这了。
scroll-view的父级只有margin-top，没有一个固定的高度，使得scroll-view的height: 100%失效，只要能重新计算出一个准确的高度，那问题就能完美解决。
解决
本来有想过调整scroll-view的父级，不过会是一个比较罗嗦的方法，所以想试试一些css里面的新技术：
scroll-view { height: calc(100vh - 128px); }
基于calc()和vh来动态计算scroll-view的高度
试了下效果，正确运行!
为了保证在各个设备和系统下能正确工作，查了一下caniuse:
vh
calc
可以看到这两个特性在iOS和Andriod下都是早早就支持了，可以安心使用的
刑事律师网站模板、响应式深灰色大气律师网站模板
￥1000.00
律师网站模板、律师事务所网站模板【响应式，蓝色简洁大气风格】
￥1000.00
简洁大气的响应式律师事务所网站设计模板，兼容移动端
￥50.00
成都律品科技有限公司专注律师互联网营销技术服务，创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年，2018年公司正式成立，不断探索律师行业服务需求，致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。
152-0832-9147
105991110
微信咨询