taro scrollIntoView 跳转对应id 视图 无效

[jd_6e3247fdcd239]

[金金金]

1 哪个端 2 有没有设置高度

[jd_6e3247fdcd239]

微信小程序端 删除线
.scrollview{
margin-top: 100px;
white-space: nowrap;
width: 100%;
height:5000px;
}
.toolBar{
position: fixed;
top:0;
display: flex;
justify-content: space-around;
width: 100%;
z-index: 999;
background: #fff;
.tag{
display: block;
width: 25%;
text-align: center;
}
}

js代码：
import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView} from '@tarojs/components'
import './index.less'

export default class Position extends Component {
constructor(props) {
super(props);
this.state = {
viewId:"A",
scrollTop:0,
list:[
{
id:"A",
name:'A'
},
{
id:"B",
name:'B'
},
{
id:"C",
name:'C'
},
{
id:"D",
name:'D'
}
]
}
}

setView(item){
console.log(item);
let id = item.id;
this.setState({
viewId:id
});
}
render() {
console.log(this.state.viewId);
return (
<View>
<View className="toolBar">
{this.state.list.map(item =>{
return (
<View className="tag" key={item.id} onClick={this.setView.bind(this,item)}>{item.name}</View>
)
})}
</View>

  <ScrollView
    className="scrollview"
    scrollX = {true}
    scrollIntoView={this.state.viewId}
  >
    <View id='A' style='height:500px;background:red'>A</View>
    <View id='B' style='height:500px;background:green'>B</View>
    <View id='C' style='height:500px;background:red'>C</View>
    <View id='D' style='height:500px;background:green'>D</View>
    <View id='E' style='height:500px;background:red'>E</View>
    <View id='F' style='height:500px;background:green'>F</View>
    <View id='G' style='height:500px;background:red'>G</View>
    <View id='H' style='height:500px;background:green'>H</View>
    <View id='I' style='height:500px;background:red'>I</View>
    <View id='J' style='height:500px;background:green'>J</View>
  </ScrollView>
</View>
)

}
}

[金金金]

@jd_6e3247fdcd239 在 taro scrollIntoView 跳转对应id 视图 无效 中说：

height:5000px;

scrollview 的 height:5000px 改成 500px 。你会发现生效了

[jd_6e3247fdcd239]

还是无效

[金金金]

@jd_6e3247fdcd239 在 taro scrollIntoView 跳转对应id 视图 无效 中说：

scrollX

？ 不是 scrollY 么

[jd_6e3247fdcd239]

可以了，非常感谢

[金金金]

客气。 你可以先理解下 scrollView 的模型

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 BetterScroll 的滚动原理。

图片和文字说明源自 better-scroll。 scrollView 对应的就是 绿色容器。 黄色就是内部元素

[jd_6e3247fdcd239]

好的，明白了，多谢大佬指点

[marlti7]

@金金金 高度不固定怎么处理