react-tiny-virtual-list
react-tiny-virtual-list copied to clipboard
Animate scroll to index
Hi i want to make the scroll smoother when I do scroll to index. How can i achive this
nvm i already modified the library to do so
Maybe submit a PR?
@Kadajett of course, if you need so I will make a PR, i just overide the default scrollTo method. I will add a new prop to enable smooth scroll.
Any updates on this?
Any updates?
Use the following
VirtualList.prototype.scrollTo = function (value) {
console.log(value)
function scrollTo(element, direction, to, duration) {
if (duration <= 0) return;
const difference = to - element[direction];
const perTick = difference / duration * 10;
setTimeout(function () {
element[direction] = element[direction] + perTick;
if (element[direction] === to) return;
scrollTo(element, direction, to, duration - 10);
}, 10);
}
const scrollDirection = this.props.scrollDirection === void 0 ? 'vertical' : this.props.scrollDirection;
if (scrollDirection === 'vertical') {
scrollTo(this.rootNode, 'scrollTop', value, 200);
} else scrollTo(this.rootNode, 'scrollLeft', value, 200);
};
Thanks @ramneekhanda ! Nice trick!
Or just
VirtualList.prototype.scrollTo = function (value) {
this.rootNode.scrollTo({ top: value, behavior: 'smooth' });
};
for vertical scroll