More scroll

src/view/com/pager/PagerWithHeader.tsx

@@ -22,6 +22,7 @@ import {TabBar} from './TabBar'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {OnScrollHandler} from 'lib/hooks/useOnMainScroll'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {isWeb} from '#/platform/detection'
 
 const SCROLLED_DOWN_LIMIT = 200
 
@@ -257,21 +258,28 @@ let PagerTabBar = ({
   return (
     <Animated.View
       pointerEvents="box-none"
-      style={[
+      style={
-        isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
+        isWeb
-        headerTransform,
+          ? []
-      ]}>
+          : [
+              isMobile ? styles.tabBarMobile : styles.tabBarDesktop,
+              headerTransform,
+            ]
+      }>
       <View onLayout={onHeaderOnlyLayout} pointerEvents="box-none">
         {renderHeader?.()}
       </View>
       <View
         onLayout={onTabBarLayout}
-        style={{
+        style={[
-          // Render it immediately to measure it early since its size doesn't depend on the content.
+          {
-          // However, keep it invisible until the header above stabilizes in order to prevent jumps.
+            // Render it immediately to measure it early since its size doesn't depend on the content.
-          opacity: isHeaderReady ? 1 : 0,
+            // However, keep it invisible until the header above stabilizes in order to prevent jumps.
-          pointerEvents: isHeaderReady ? 'auto' : 'none',
+            opacity: isHeaderReady ? 1 : 0,
-        }}>
+            pointerEvents: isHeaderReady ? 'auto' : 'none',
+          },
+          isWeb ? {position: 'sticky', top: 0} : null,
+        ]}>
         <TabBar
           testID={testID}
           items={items}
@@ -315,7 +323,7 @@ function PagerItem({
   }
 
   return renderTab({
-    headerHeight,
+    headerHeight: isWeb ? 0 : headerHeight,
     isFocused,
     isScrolledDown,
     onScroll: scrollHandler,

src/view/com/util/Views.web.tsx

@@ -120,13 +120,13 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
     ref,
     () => ({
       scrollToTop() {
-        console.log('yeahh')
+        window.scrollTo({top: 0})
       },
       scrollToOffset({animated, offset}) {
-        nativeRef.current.scrollTo({
+        window.scrollTo({
-          x: 0,
+          left: 0,
-          y: offset,
+          top: offset,
-          animated,
+          behavior: animated ? 'smooth' : 'instant',
         })
       },
     }),
@@ -134,6 +134,9 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
   )
 
   React.useEffect(() => {
+    if (!onScroll) {
+      return
+    }
     function handleScroll(e) {
       onScroll.current.worklet({
         ...e.nativeEvent,