WebView2: Mouse Scroll Wheel does nothing

[mdtauk]

Describe the bug Using the Scroll Wheel on my mouse is not scrolling the page

Steps to reproduce the bug

1. Open XAML Controls Gallery
2. Go to Media > WebView2
3. Move the mouse over the WebView2 control and use the Scroll Wheel

Expected behavior The Page should smoothly scroll as you turn the Scroll Wheel.

Version Info XAML Controls Gallery version 1.2.22.0

NuGet package version:

Windows 10 version	Saw the problem?
May 2020 Update (19041)	Yes

Device form factor	Saw the problem?
Desktop	Yes

Additional context Pressing down on the Scroll Wheel/Middle Mouse Button, and dragging will scroll, but will not display the expected Dragging Cursor

[codendone]

@mdtauk I don't repro this issue. You're rolling the mouse wheel while the mouse is over the WebView2 and it does no scrolling? Is there anything special about your mouse?

[mdtauk]

I don't think so, it's a Microsoft intellisense mouse released a year or so ago.

https://www.microsoft.com/accessories/en-gb/products/mice/microsoft-classic-intellimouse

[codendone]

Today I'm reproing it, both with attempted two-finger scrolling with a touchpad and an old mouse. Something is weird (and definitely broken) here...

[mqudsi]

This is a regression from the previous release, WebView2 is not getting the mouse scroll events (even with a regular mouse, ie not a touchpad).

If you hold down the left mouse button while scrolling, the events are received and the web view scrolls.

[anawishnoff]

It looks like we weren't able to repro this internally, so I'll be closing this issue. If this issue still persists in WinUI 3 Preview 4 (to be released in early February), please re-open this issue.

[rcohn]

This is still a problem with WinUI3 1.0. Turning the mouse wheel has no vertical scrolling effect in the WebView2 embedded browser.

Are there plans to fix this?

Thank you.

[manu-cyber]

I can confirm this bug still persists. It’s super annoying in a ScrollView that contains multiple Controls, including a WebView2. It just stops scrolling and I have to instruct users to drag the scroll bar isntead.

[codendone]

@irimi1 If I'm reading your comment correctly, I think your situation is that you want the ScrollView to scroll even when the mouse is over a WebView2? I think that is a different situation from what this issue originally tracked. It is unfortunately a limitation currently that mouse wheel events are consumed by the WebView2 even if the content of the WebView2 can't scroll. This does create problems when trying to use a WebView2 control inside a scrolling region.

[rcohn]

I have not played much with WebView2 since my original comment above. However, there is some significant work looming that will depend on a successful adoption of WebView2 into our app. From what I'm seeing above, it seems like the only scrolling support for WebView2 content would be to drag a scrollbar on whatever page is being displayed within the WebView2 control. Is this correct?

Thank you.

[codendone]

@rcohn Yes, the scrollbar will work, or alternatively moving the mouse to not be over the WebView2 (but still over the scrolling region) before using the mouse wheel, which is a workaround likely not obvious to users. Large WebView2 elements don't behave very well in a scrolling region due to this limitation.

[manu-cyber]

@codendone Do you know of any workaround or alternative that I could use? My goal is to display an area with a Webview below a DataGrid that I can scroll together, like if they were one element.

[mqudsi]

@irimi1 unless you’re willing to dig into the Win32 internal, I think you’re going to have to rethink that approach (eg stream or mirror the data to an html/js alternative to the data grid) because AFAIK the only control that supports virtualized load/scroll is ListViewBase. The other option would be use a ListView as the container, virtualizing it’s height and scroll to match the data grid + html contents, the fix the html height to the remainder of the container with overflow hidden. As the ListView scrolls, instead of materializing the content you would update the position of the contents of the div in the web view. It’ll probably feel off though unless your html contents are of fixed height.

[codendone]

@irimi1 A couple other potential changes which could help:

1. Does your WebView2 content happen to be just visual, not requiring any input? If you happen to be in this limited scenario, you could overlap a Background="Transparent" element above the WebView2, which will keep the WebView2 from getting and consuming any mouse/touch/pen input, allowing mouse wheel to still be handled by the scroll view.
2. You could potentially have the web page hosted by the WebView2 listen for mouse wheel events on the page, check to see if the page can scroll in that direction, and if it can't scroll then post a message out to the WebView2 element (via window.chrome.webview.postMessage) which you could then have an event listener for to find and scroll the scroll view. This isn't trivial and isn't perfect, but this can keep the user from getting stuck when trying to mouse wheel over a WebView2. (In this approach you could also inject this event handling into the web page via myWebView2.CoreWebView2.ExecuteScriptAsync if you can't or don't want to change the source of the pages.)

[manu-cyber]

@codendone It does indeed not require any input, so option 1. sounds like something I could do. Thanks so much (also @mqudsi) for your help. :)

[elielson-anjos]

Still happening!

[flameOnYou]

Still happening!