virtua 0.50.6 → 0.51.1

package/README.md

@@ -28,7 +28,12 @@ https://inokawa.github.io/virtua/
 npm install virtua
 ```
 
-If you use this lib in [legacy browsers which does not have ResizeObserver](https://caniuse.com/?search=resizeobserver), you should use [polyfill](https://github.com/juggle/resize-observer#switching-between-native-and-polyfilled-versions).
+If you want to support legacy browsers, you need polyfills.
+
+- [ResizeObserver](https://caniuse.com/?search=resizeobserver) is always required (e.g. [@juggle/resize-observer](https://github.com/juggle/resize-observer#switching-between-native-and-polyfilled-versions)).
+- [Scroll methods on elements](https://caniuse.com/element-scroll-methods) are always required (e.g. [element-scroll-polyfill](https://github.com/idmadj/element-scroll-polyfill)).
+- [CSS scroll-behavior](https://caniuse.com/?search=scroll-behavior) is required only if you call `scrollToIndex` with `smooth: true` (e.g. [scroll-behavior-polyfill](https://github.com/wessberg/scroll-behavior-polyfill)).
+- [CSS inset-inline-start](https://caniuse.com/mdn-css_properties_inset-inline-start) is required only if you set `horizontal: true`. It cannot be polyfilled so use `virtua@<=0.50` instead.
 
 ## Getting started
 
@@ -212,8 +217,8 @@ const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]);
       :key="index"
       :style="{
         height: item + 'px',
-        background: 'white',
         borderBottom: 'solid 1px #ccc',
+        background: 'white',
       }"
     >
       {{ index }}
@@ -240,7 +245,7 @@ export const App = () => {
           style={{
             height: d + "px",
             "border-bottom": "solid 1px #ccc",
-            background: "#fff",
+            background: "white",
           }}
         >
           {i()}
@@ -264,13 +269,13 @@ export const App = () => {
   const data = Array.from({ length: 1000 }).map((_, i) => sizes[i % 4]);
 </script>
 
-<VList {data} style="height: 100vh;" getKey={(_, i) => i}>
+<VList {data} style="height: 800px;" getKey={(_, i) => i}>
   {#snippet children(item, index)}
     <div
       style="
         height: {item}px;
-        background: white;
         border-bottom: solid 1px #ccc;
+        background: white;
       "
     >
       {index}

package/lib/angular/Virtualizer.d.ts

@@ -11,7 +11,7 @@ export interface VirtualizerHandle {
      */
     readonly cache: CacheSnapshot;
     /**
-     * Get current scrollTop, or scrollLeft if horizontal: true.
+     * Get current scrollTop, or scrollLeft if horizontal: true. Always positive even in RTL.
      */
     readonly scrollOffset: number;
     /**
@@ -19,7 +19,7 @@ export interface VirtualizerHandle {
      */
     readonly scrollSize: number;
     /**
-     * Get current offsetHeight, or offsetWidth if horizontal: true.
+     * Get current clientHeight, or clientWidth if horizontal: true.
      */
     readonly viewportSize: number;
     /**

package/lib/angular/WindowVirtualizer.d.ts

@@ -10,11 +10,11 @@ export interface WindowVirtualizerHandle {
      */
     readonly cache: CacheSnapshot;
     /**
-     * Get current scrollTop, or scrollLeft if horizontal: true.
+     * Get current scrollTop, or scrollLeft if horizontal: true. Always positive even in RTL.
      */
     readonly scrollOffset: number;
     /**
-     * Get current offsetHeight, or offsetWidth if horizontal: true.
+     * Get current clientHeight of the document, or clientWidth if horizontal: true.
      */
     readonly viewportSize: number;
     /**