Mouse scroll wheel feels laggy and not smooth in my Flutter website

Question

I'm building a website using Flutter Web, but when I scroll using the mouse scroll wheel, it doesn’t feel smooth it’s kind of laggy or jumpy compared to websites built with React or standard HTML/CSS.

I’ve tried using a SingleChildScrollView and even wrapping my content in a ScrollConfiguration, but the scroll behavior still feels rough.

Is there a way to make mouse wheel scrolling smoother in Flutter Web, similar to how scrolling feels on React-based or native web pages?

What I want:

Smooth scrolling experience using the mouse wheel
Works consistently across browsers

my code :-

WebSmoothScroll( scrollAnimationLength: 800, scrollSpeed: 1.5, controller: _scrollController, child: SingleChildScrollView( physics: const NeverScrollableScrollPhysics(), controller: _scrollController, child: ScrollTransformView( children: [ ScrollTransformItem(

Can't say much without code but you can try web_smooth_scroll or smooth_list_view. — Harish Kumar
– Harish Kumar, Commented Oct 20 at 11:41

Jeevithan · Accepted Answer · 2025-10-21 17:44:18Z

Reason behind this:

Flutter renders everything using a Canvas (WebGL/HTML renderer) — not the browser’s native scroll engine.
So, mouse scroll events are emulated in Dart, not handled by the browser directly.
By default, Flutter scroll physics are tuned for touch/mobile behavior, not for desktop/web smoothness.

Try these approaches for best scrolling behavior:

Avoid unnecessary widget rebuilds, use const wherever possible.
Use the HTML renderer when targeting web - 'flutter build web --web-renderer html'.

Alternative approach:

If you want native browser scroll behavior (like React), you can bypass Flutter’s scroll engine:

import 'package:flutter/foundation.dart' show kIsWeb; import 'dart:html' as html; void enableSmoothScroll() { if (kIsWeb) { html.document.documentElement?.style.scrollBehavior = 'smooth'; } }

Call this is main.dart

void main() { // Enable smooth scrolling on web enableSmoothScroll(); runApp(const MyApp()); }

Use the HTML renderer when targeting web - 'flutter build web --web-renderer html'. Alternative approach: If you want native browser scroll behavior (like React), you can bypass Flutter’s scroll engine: import 'package:flutter/foundation.dart' show kIsWeb; import 'dart:html' as html; void enableSmoothScroll() { if (kIsWeb) { html.document.documentElement?.style.scrollBehavior = 'smooth'; } } Call this is main.dart void main() { // Enable smooth scrolling on web enableSmoothScroll(); runApp(const MyApp()); } i use both options but this not working

Collectives™ on Stack Overflow

Mouse scroll wheel feels laggy and not smooth in my Flutter website

1 Answer 1

Reason behind this:

Try these approaches for best scrolling behavior:

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Reason behind this:

Try these approaches for best scrolling behavior:

1 Comment

Related