[英]React scroll component to view inside overflow hidden element
我有一個列表,其中包含一系列項目,但我不能讓它將另一個項目滾動到視圖中。 像這樣的解決方案不太有用,因為我必須向上和向下滾動(基本上如果列表太大,則每隔一段時間滾動它以顯示所有項目)。
我創建了一個codepen來說明react-scroll-to-component的問題,但我對任何庫/本機解決方案都是開放的。 基本功能只是scrollToComponent(ref, <options>)
。
據我所知,錯誤是它試圖滾動身體,而不是實際的容器。 如果刪除div的高度/溢出屬性,它將起作用。
不起作用:
<div
style={{
height: `200px`,
overflow: "hidden"
}}
>
{this.state.items.map(item => (
<Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
))}
</div>
作品:
<div>
{this.state.items.map(item => (
<Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
))}
</div>
任何不想去codepen的人的完整代碼:
class Item extends React.Component {
render() {
return <div style={{ padding: `12px` }}>Item {this.props.item}</div>;
}
}
class List extends React.Component {
state = {
items: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20
]
};
componendDidMount() {
this.state.items.forEach(item => (this[`ref_${item}`] = React.createRef()));
}
onClick = () => {
scrollToComponent(this.ref_20);
};
render() {
const { items } = this.state;
return (
<div>
<h1>My List</h1>
<button onClick={this.onClick}>Clickidy</button>
{/*Replace with <div> to see it work*/}
<div
style={{
height: `200px`,
overflow: "hidden",
backgroundColor: "red"
}}
>
{this.state.items.map(item => (
<Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
))}
</div>
</div>
);
}
}
我將給你一個簡單的修復,但這是它的工作原理。 您需要設置包含要scroll
所有元素的div的溢出。 這是因為如果你將它設置為隱藏所有不能適合該div的元素都會被隱藏。 我給你的解決方案甚至不需要使用react-scroll-to-component
或任何包。
import React from "react";
import { render } from "react-dom";
class Item extends React.Component {
render() {
const { item } = this.props;
return (
<div style={{ padding: `12px` }} id={item}>
Item {item}
</div>
);
}
}
class List extends React.Component {
state = {
items: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20
]
};
onClick = () => {
/** You can avoid using getElementById if you can get the div rendered by Item component using refs.
* You can look at refs forwarding and other technics to see how you can solve this */
const divToScrollTo = document.getElementById(`${this.ref_20.props.item}`);
if (divToScrollTo) {
divToScrollTo.scrollIntoView();
}
};
render() {
const { items } = this.state;
return (
<div>
<h1>My List</h1>
<button onClick={this.onClick}>Clickidy</button>
<div
style={{
height: `200px`,
overflow: "scroll",
backgroundColor: "red"
}}
>
{this.state.items.map(item => (
<Item ref={inst => (this[`ref_${item}`] = inst)} item={item} />
))}
</div>
</div>
);
}
}
或者您可以單擊下面的鏈接獲取代碼筆解決方案https://codesandbox.io/s/2vo0j2w660
我沒有做過代碼中需要的更多優化,因為我時間不好但希望這會有所幫助
如果你使用refs轉發更容易,如代碼筆所示https://codesandbox.io/s/yjj66xl2v1但你必須在構造函數方法中創建refs
從overflow: hidden
更改第55行overflow: hidden
到overflow: scroll
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.