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(

• Harish Kumar: Can't say much without code but you can try web_smooth_scroll or smooth_list_view.

Answer 1

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());
}

• OM BELEKAR: 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