vuetifyjs
feat(VVirtualScroll): add scrollToIndex options and fractional scroll
Description
scrollToIndex does not scroll to fractional values. Fractional values would allow scrolling to a point between two elements.
For example, scrollToIndex(1.5) should scroll halfway between indices 1 and 2.
scrollToIndex also does not support scroll options, which makes it difficult to programmatically use smooth vs instant scrolling.
This change should be backwards compatible with existing consumers of this API:
- fractional values did not work at all prior to this change, and would fail.
- the second options argument did not exist.
Hey there, thank you for your patience. A few things to note:
- Features should go to
devbranch - Please provide a playground for this P.R.
Thank you for your patience.
@johnleider I'm not sure how to make a playground with my changes, but here's a sample that would work with my changes:
https://play.vuetifyjs.com/#eNpVkk1vwjAMhv+Kl0tBgkLC2AcraDty341y6EqAaCGp2rTaVPW/L3YKrJdXie3H8Ud2LavKfPZRFHFTS7ZiiZOXQmdOblIDkDTTrCjoSJfcGpcpI8veRMYvZ+A91yr/Xqesykurdco24ZDMyO/D/wGNKl2d6Wkf2zsASnm8ZZBlyu6e1Vmq09l572I+HziUr7fy9l3EowlEAmWB8oiyRHlCeUZ5QXlF4XNSYjhBnChOGCeOE8iJ5IRyYgWxIrxHrCBWECuIFcQKYgWxgtjFPNrf679N0Y/lOndoppW2bnWQx6zW2HIL2CR0fqiwxVN7tXSQzAb7okx+5MMJX/fnHcMFoiXsd5An8ZgqHFTS1QXozJx8Fa7y7yOkLoUtHbS4LujgWNoLpMz/npS9hTX7RypP93uENUYmmfndjMY+AuBYm9wpa/qQ0RjaUCGCVstY29MoCk5lTlGg4JYxbjJdy4c43D/t1hzkz2gZL0Ngh+2EFnzBrJuYWmuS/R82UNj8
@johnleider I'm not sure how to make a playground with my changes, but here's a sample that would work with my changes:
https://vuetifyjs.com/en/getting-started/contributing/#playground-vue
Playground
<template>
<v-app>
<v-container>
<v-btn @click="scroll">scroll</v-btn>
<v-virtual-scroll ref="scroller" :height="300"
:items="['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']">
<template v-slot:default="{ item }"> Item {{ item }} </template>
</v-virtual-scroll>
</v-container>
</v-app>
</template>
<script setup lang="ts">
import { ref } from "vue";
const scroller = ref<any>();
function scroll() {
console.log('scrolling');
scroller.value!.scrollToIndex(5.5);
}
</script>