Why scrollToIndex is not working in RTL?
Why scrollToIndex code works for LTR and not for RTL? is it known issue?
function ColumnVirtualizerFixed() {
const parentRef = React.useRef(null);
const columnVirtualizer = useVirtualizer({
isRtl: true,
horizontal: true,
count: 10000,
getScrollElement: () => parentRef.current,
estimateSize: () => 100,
overscan: 5,
gap: 20,
});
return (
<>
<div
style={{
width: `400px`,
height: `100px`,
}}
>
<div
dir="rtl"
ref={parentRef}
className="List"
style={{
width: '100%',
height: '100%',
overflowX: 'scroll',
overflowY: 'hidden',
scrollbarWidth: 'none',
}}
>
<ul
style={{
width: `${columnVirtualizer.getTotalSize()}px`,
height: '100%',
position: 'relative',
listStyle: 'none',
margin: 0,
padding: 0,
}}
>
{columnVirtualizer.getVirtualItems().map((virtualColumn) => (
<li
key={virtualColumn.index}
className={
virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
}
style={{
position: 'absolute',
height: '100%',
width: `${virtualColumn.size}px`,
transform: `translateX(-${virtualColumn.start}px)`,
border: '1px solid black',
padding: 0,
}}
>
Column {virtualColumn.index}
</li>
))}
</ul>
</div>
</div>
<button
onClick={() => {
columnVirtualizer.scrollToIndex(6, {
behavior: 'smooth',
align: 'center',
});
}}
>
scroll
</button>
</>
);
}
function ColumnVirtualizerFixed() {
const parentRef = React.useRef(null);
const columnVirtualizer = useVirtualizer({
isRtl: true,
horizontal: true,
count: 10000,
getScrollElement: () => parentRef.current,
estimateSize: () => 100,
overscan: 5,
gap: 20,
});
return (
<>
<div
style={{
width: `400px`,
height: `100px`,
}}
>
<div
dir="rtl"
ref={parentRef}
className="List"
style={{
width: '100%',
height: '100%',
overflowX: 'scroll',
overflowY: 'hidden',
scrollbarWidth: 'none',
}}
>
<ul
style={{
width: `${columnVirtualizer.getTotalSize()}px`,
height: '100%',
position: 'relative',
listStyle: 'none',
margin: 0,
padding: 0,
}}
>
{columnVirtualizer.getVirtualItems().map((virtualColumn) => (
<li
key={virtualColumn.index}
className={
virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
}
style={{
position: 'absolute',
height: '100%',
width: `${virtualColumn.size}px`,
transform: `translateX(-${virtualColumn.start}px)`,
border: '1px solid black',
padding: 0,
}}
>
Column {virtualColumn.index}
</li>
))}
</ul>
</div>
</div>
<button
onClick={() => {
columnVirtualizer.scrollToIndex(6, {
behavior: 'smooth',
align: 'center',
});
}}
>
scroll
</button>
</>
);
}
1 Reply
metropolitan-bronzeOP•2mo ago
For make it work for RTL i have to do these changes :
isRtl: true and then dir="rtl" on scrollable container and pass the negative value to transform: translateX(-${virtualColumn.start}px) here.
Can anyone help here like its very simple example still the scrollToIndex does not work