The scroll action in horizontal list view causing page navigation in flutter web app

In my flutter web app, I have TabBarView and in one of the tabs, there is horizontally scrollable list view. The scroll action often causing website navigation action ending up in previous webpage. Please refer image below For widget tree structure.

The item in the ListView contains widgets each having vertically scrollable checkbox list tiles. (Hope that does not cause this.)

Note: I am using trackpad for scrolling.

I have tried PopScope implementation to prevent pop from current site, but that's failing too.

Example code:

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    PointerDeviceKind.trackpad, // Add trackpad support
  };
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    ScrollController horizontal = ScrollController();


    return MaterialApp(
      scrollBehavior:MyCustomScrollBehavior() ,
      home: DefaultTabController(

        length: 2,
        child: Scaffold(
          appBar: AppBar(
            // TRY THIS: Try changing the color here to a specific color (to
            // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
            // change color while the other colors stay the same.
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
            bottom: const TabBar(tabs: [Tab(text: "Tab1",),Tab(text: "Tab2",)]),
          ),
          body: TabBarView(
            children: [Center(
              // Center is a layout widget. It takes a single child and positions it
              // in the middle of the parent.
              child:

              Scrollbar(
                trackVisibility: true,
                thumbVisibility: true,
                controller: horizontal,
                child: SingleChildScrollView(
                    controller: horizontal ,
                    scrollDirection: Axis.horizontal,
                    child: Row(
                        children: List.generate(
                            (100),
                                (j) => SizedBox(
                              width: 200,
                              height: 300,
                              child: Column(
                                children: [
                                  Center(child: Text("Something $j")),
                                  Expanded(child: SingleChildScrollView(child: Column(children: List.generate((40), (i)=>Text("Column $i"))),))
                                ],
                              ),
                            )))),
              ))],
          ),

          // This trailing comma makes auto-formatting nicer for build methods.
        ),
      ),
    );
  }
}