背景
项目使用taro开发，需要转多端（小程序、h5、RN）。我们有个commonList列表组件，里面会对 taro的ScrollView组件进行封装，达到一些数据为空显示占位或者下拉加载等功能；
有个小伙伴需要用这个组件进行类似微信的聊天界面，
在输入消息多于一屏的时候自然而然需要滚动到最底部，使用户看到的一直是最新的消息。
问题
看到这种需求首先就翻了翻官网，在ScrollView的属性上看到了scrollIntoView属性；
没问题，用起来~我们每添加一条新增消息就给它一个新的Id并传入组件中。
return <HKCommonList
{...this.props}
scrollIntoView={this.state.viewId}
/>
ok，看看效果。微信小程序和RN效果如下：
动图戳https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/ade5e185a0fed12876b329d06941c52a.gif
没问题，通过~
但是到了H5就会发生消息错位的问题。。。。。
动图戳 https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/a9579225c635d7d882be161e480b0ba3_22.gif
why？！？！？
分析
我们的commonList组件：
<ScrollView
style={{ width: '100%' }}
{...this.props}
scrollY
scrollWithAnimation
...
>
{this.props.data.map((v: { type: any }, i) => {
return this.props.rowRenderer(v.type, this.props.data, i); //自定义渲染
})}
</ScrollView>
并没有什么特别的。。。
整个排查过程不太好描述啊，翻了翻issue发现好多人都遇到过类似的问题，但是都不是很适用我们这种场景。
把commonList组件中的代码原封不动拿到我们的页面组件里运行表现也是正常的，实在想不明白咋回事。。。
解决
最后的最后，有个需求需要给ScrollView中的列表内容在加上一个id的容器包裹，修改之后是这样：
<ScrollView
style={{ width: '100%' }}
{...this.props}
scrollY
scrollWithAnimation
...
>
<View id={this.props.containerId || 'hkcommonlist-container'}>
{this.props.data·.map((v: { type: any }, i) => {
return this.props.rowRenderer(v.type, this.props.data, i); //自定义渲染
})}
</View>
</ScrollView>
之后再次进行对话测试的回收就发现H5表现正常了！！！！
改完之后H5效果如下，RN和小程序表现也正常：
动图戳 https://wos2.58cdn.com.cn/DeFazYxWvDti/frsupload/03cd2079f01468f2df0e061ff24aad2a.gif
