Can I bind scroll wheel events to arbitary elements?

[JonnieCache]

I'd like to be able to scroll up and down on my speaker icon to change the volume, without clicking to show the slider.

[enessmr]

Outdated.

[Aylur]

in gtk3 you need to use an eventbox
in gtk4 you can use a motion eventcontroller

Aylur/gnim#14

[JonnieCache]

Here's the complete widget, you can scroll on the icon and the slider pops up:

function Volume() {
  const { defaultSpeaker: speaker } = AstalWp.get_default()!
  let popover: Gtk.Popover;

  const stepVolume = (dy: number) => {
    const scale = 0.1;
    const step = Math.sign(-dy) * scale;
    const newVol = speaker.get_volume() + step;

    popover.popup();
    speaker.set_volume(newVol);
  }

  return (
    <menubutton>
        <image iconName={createBinding(speaker, "volumeIcon")} class="volume" />
        <Gtk.GestureClick button={1}
          onPressed={(_gesture, _n, _x) => {
            speaker.set_mute(!speaker.mute);
          }}
        />
      <Gtk.EventControllerScroll
        flags={Gtk.EventControllerScrollFlags.VERTICAL}
        onScroll={(_scroll, _dx, dy) => stepVolume(dy)}
      />
      <popover autohide={true} $={self => popover = self}>
        <slider
          orientation={Gtk.Orientation.VERTICAL}
          inverted={true}
          heightRequest={100}
          onChangeValue={({value}) => speaker.set_volume(value)}
          value={createBinding(speaker, "volume")}
        />
      <Gtk.EventControllerScroll
        flags={Gtk.EventControllerScrollFlags.VERTICAL}
        onScroll={(_scroll, _dx, dy) => stepVolume(dy)}
      />
      </popover>

    </menubutton>
  )
}