Scroll down and Up are not working.

[toannguyendts]

I try to use mouse scroll . But It is not affected. I have tested it on WPF. It is working perfectly. Anh Touch support only click. Cannot move. Thank!

I tested it on https://joltfly.com/mouse-test/

[Milesssssss]

I have the same problem @jnschulze @toannguyendts

[jnschulze]

Scrolling works for me but in order to debug this, you can do a quick check if the problem is on the Dart or the native side.

This plugin uses the Listener widget on the Dart side for detecting scroll events. You might set up a Listener and see if it fires scroll events (using onPointerSignal).

[toannguyendts]

@jnschulze you can move your mouse to this area and scroll it. It cannot scroll box inside. It is working only outside

[tuantiensiu]

Hi @toannguyendts, you can help me to setup this package in my project? You can provide your current version flutter. Because I have error in my project. You can show more error in this link: #41

[angle222]

Scrolling works for me but in order to debug this, you can do a quick check if the problem is on the Dart or the native side.

This plugin uses the Listener widget on the Dart side for detecting scroll events. You might set up a Listener and see if it fires scroll events (using onPointerSignal).

I checked on my widget for using "onPointerSignal",the scroll events in widget worked,but in the webview's page,the scroll event doesn't worked

[Ingenious-c0der]

Scrolling works for me but in order to debug this, you can do a quick check if the problem is on the Dart or the native side.

This plugin uses the Listener widget on the Dart side for detecting scroll events. You might set up a Listener and see if it fires scroll events (using onPointerSignal).

So the scrolling does work, but the only places where it doesn't work (as expected) is when there are smaller containers in the webpage which are scrollable.

Expected Behaviour: When the mouse is placed on / hovered on the (webpage) container and scrolled, the scroll bar inside the smaller container should be considered and not the main page scroll bar (if it exists)

Current Behaviour: The mouse location doesn't really seem to matter, it will always interact with the main page (largest) scrollbar.

[tashi146]

I am having the same issue with ESRI Map in webview, Zoom and zoom out by scrolling doesn't work. I am using the latest version. I can see code reach

return _methodChannel.invokeMethod('setScrollDelta', [dx, dy]);
But after that I believe we need to run in native to debug Any update on this? Update: I end up creating own Listener widget and update the same listener in web content as well.

[incspitz]

@tashi146 , could you describe exactly what you did to workaround the issue? I debugged the case and the line setScrollDelta is called when scrolling a small container with scrollbar. Which listener did you update in web content? Thanky you!

[cathino]

any updates?

[979liyang]

Scrolling works for me but in order to debug this, you can do a quick check if the problem is on the Dart or the native side.

This plugin uses the Listener widget on the Dart side for detecting scroll events. You might set up a Listener and see if it fires scroll events (using onPointerSignal).

So the scrolling does work, but the only places where it doesn't work (as expected) is when there are smaller containers in the webpage which are scrollable.

Expected Behaviour: When the mouse is placed on / hovered on the (webpage) container and scrolled, the scroll bar inside the smaller container should be considered and not the main page scroll bar (if it exists)

Current Behaviour: The mouse location doesn't really seem to matter, it will always interact with the main page (largest) scrollbar.

Did you solve it.

[aisams]

同样的问题，无法与网页小滚动条交互，始终是与最外层的滚动条交互。有解决问题的麻烦回复我下谢谢，[email protected]

[toannguyendts]

I have solution for this. You must custom onPointerSignal of lib. By my way, I dont use _controller._setScrollDelta . I will use postMessage to my web apps. Then my webapps can capture event scroll. Finally, you can control event scroll by your self.

*Flutter Side: Go to webview_windows.dart Add function below

String postMouseEvent(String mouseEvent,dynamic data)
  {
    return jsonEncode({"mouse_event" : mouseEvent,"data" : data});
  }

Then override onPotinerSignal

onPointerSignal: (signal) {
                        if (signal is PointerScrollEvent) {
                          String mouse_event = postMouseEvent("scroll",{"scroll_delta_dx":-signal.scrollDelta.dx,"scroll_delta_dy":-signal.scrollDelta.dy});
                          _controller.postWebMessage(mouse_event);
                          // _controller._setScrollDelta(
                          //     -signal.scrollDelta.dx, -signal.scrollDelta.dy);
                        }
                      },

• Web App

 document.getElementsByTagName("body")[0].addEventListener("mousemove", (e) => {
      this.element = document.elementFromPoint(e.x, e.y);
      // this.mousePos = { x: e.x, y: e.y };
    });

    if (typeof window.chrome.webview !== "undefined") {
      window.chrome.webview.removeEventListener("message");
      window.chrome.webview.addEventListener("message", this.handleMessage);
    }

handleMessage(message) { let direction = message.data.data.scroll_delta_dy > 0 ? -1 : 1; let distance = 40; if(this.getScrollDiv(this.element)) { let classList = this.getScrollDiv(this.element).classList; let queryString = ""; for(let i = 0; i < classList.length; i++) { queryString += ('.' + classList[i]); } let elems = document.querySelectorAll(queryString); if (elems && elems[0]) { elems.forEach((elem) => { elem.scrollTop += direction * distance; }); } } }, getScrollDiv(el) { while (el && el.parentNode) { if(el.style.overflow == "auto" || el.style.overflow == "scroll" || el.style.overflowY == "auto" || el.style.overflowY == "scroll") { return el; } el = el.parentNode; } return null; },

[bvoq]

We solved it in a similar fashion, here is the source code for reference:

  Future<void> scrollWebview(double mouseX, double mouseY, double dx, double dy) {
    return _windowsController.executeScript("""
            function eleCanScroll(ele) {
              if (ele.scrollTop > 0) { return ele; }
              else {
                ele.scrollTop++;
                const top = ele.scrollTop;
                top && (ele.scrollTop = 0);
                if(top > 0){
                  return ele;
                } else {
                  return eleCanScroll( ele.parentElement);
                }
              }
            }
            var el = document.elementFromPoint($mouseX,$mouseY);
            var el2 = eleCanScroll(el);
            el2.scrollBy($dx,$dy);
            """);
  }


// ... inside your body use:
return Listener(
        onPointerPanZoomUpdate: (event) {
          final Offset panDelta = event.panDelta;
          final Offset position = event.position;
          scrollWebview(position.dx, position.dy, panDelta.dx, panDelta.dy);
        },
        onPointerSignal: (signal) {
          if (signal is PointerScrollEvent) {
            final Offset scrollDelta = signal.scrollDelta;
            final Offset position = signal.position;
            scrollWebview(position.dx, position.dy, scrollDelta.dx, scrollDelta.dy);
          }
        },
        child: Stack(
          children: [
            webview_windows.Webview(
              _windowsController,
            ),
            StreamBuilder<webview_windows.LoadingState>(
              stream: _windowsController.loadingState,
              builder: (context, snapshot) {
                if (snapshot.hasData && snapshot.data == webview_windows.LoadingState.loading) {
                  return const LinearProgressIndicator();
                } else {
                  return const SizedBox();
                }
              },
            ),
          ],
        ),
      );