Repository navigation
[Desktop][Web] Option to scroll horizontal scroll views on vertical scroll event (if not nested in vertical scroll view) #185146
Description
Use case
When having a SingleChildScrollView with scrollDirection: Axis.horizontal, it is currently not possible to scroll it if having the following setup (at least):
- Web (Tested with Firefox and Chrome) on MacOS (but would be interesting, if its the same behavior on all other (desktop) platforms)
- a regular mouse (no trackpad, no horizontal scroll buttons)
Example:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/gestures.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(colorSchemeSeed: Colors.blue),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
// Edit: even with the following, horizontal scroll is not working, while hovering on the items themselves.
// It does work though, when the browser window is not focused!
// See: https://github.com/flutter/flutter/issues/159868
scrollBehavior: ScrollBehavior().copyWith(
dragDevices: {PointerDeviceKind.touch, PointerDeviceKind.mouse},
scrollbars: true,
pointerAxisModifiers: {
LogicalKeyboardKey.shiftLeft,
LogicalKeyboardKey.shiftRight,
},
),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({super.key, required this.title});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: SizedBox(
height: 300,
width: 300,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.min,
spacing: 8,
children: List.generate(9, (i) => Container(width: 100, height: 50, color: Colors.red)),
),
),
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisSize: MainAxisSize.min,
spacing: 8,
children: List.generate(9, (i) => Container(width: 100, height: 50, color: Colors.blue)),
),
),
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}- One can scroll the vertical scroll with the scroll wheel
- One cannot scroll the horizontal scroll with the scroll wheel (even with shift pressed)
- One drag (with mouse click) to move the items in the scroll view.
Proposal
- Allow scrolling a horizontal
SingleChildScrollViewwith a the vertical mouse scroll wheel, but only if its not wrapped in a Vertical Scroll View. - Allow always horizontal scroll if pressing
shift+ vertical scroll. - Optional: allow dragging scrolls on desktop environments
Workaround:
- user uses trackpad, or input device with horizontal scroll buttons / wheel.
Related:
#105095
Activity
[-][Desktop] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/-][+][Desktop][Web] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/+]Piinks commentedon Apr 16, 2026
This is already supported: https://api.flutter.dev/flutter/widgets/ScrollBehavior/pointerAxisModifiers.html
This can also be configured: https://api.flutter.dev/flutter/widgets/ScrollBehavior/dragDevices.html
Piinks commentedon Apr 16, 2026
I am not sure we should do this, it makes an assumption about behavior that is the opposite of what the scroll view has been set up to do. The above configurations are available to modify as desired.
Gustl22 commentedon Apr 16, 2026
Thank you for the fast answer and help!
There the default is mentioned
shiftLeftandshiftRight, but in my example this didn't trigger the horizontal scroll to move, when clickingshift + mouse wheel. Is that desired, without explicit configuring it?I see, sorry, did not know that this exists.
The above configurations you mentioned do not offer automatic horizontal scroll, if not nested in a vertical scroll, or did I miss something. I would at least have the option to configure the scrolling with the other axis or with both axis wheels in
ScrollBehavior, not just via the modifier keys, e.g. like done for Firefox tabs. Should I create a feature request?Thank you for your time!
[-][Desktop][Web] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/-][+][Web] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/+][-][Web] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/-][+][Desktop][Web] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/+]Gustl22 commentedon Jul 15, 2026
I think my problem is partially: #159868
[-][Desktop][Web] SingleChildScrollView with `scrollDirection: Axis.horizontal` should be scrolled on vertical scroll[/-][+][Desktop][Web] Option to scroll horizontal scroll views on vertical scroll event (if not nested in vertical scroll view)[/+]fix: Apply reversed axis flip by macOS on Web when scroll with modifi…