Obsever plugin and ctrl key event with zoom

[jackkemm]

Hi there,

 

I am using the Obsever plugin to allow a user to zoom in/out on a container using the `ctrl` key.

 

The idea is that when you scroll over the container, you will need to hold the `ctrl` key to be able to zoom in/out.

 

The issue I am having is the page scrolls up and down when the user holds the `ctrl` key, rather than just the zooming. I tried using `preventDefault: true`, but naturally this prevents any sort of scrolling over the container.

 

I did think it was Lenis at first as I am using this for a smooth page scroll, and the page was scrolling still albeit very slowly, but this is because Lenis handles scrolling differently I think 🤷‍♂️

 

My question is, is there a way to stop the page from scrolling using Observer when a user hits the `crtrl` key, or is this a more general JS question?

 

Thanks in advance.

 

Jack

See the Pen jORbdKa by jackkemm (@jackkemm) on CodePen

[mvaneijgen]

The behaviour you describe seems to be happening in the pen you linked. If I just scroll the page scrolls, when I'm over the zoomContainer and hold ctrl it zooms. When I then release and scroll again the page scrolls. Tested on macOS Safari and Chrome 

[jackkemm]

Hi @mvaneijgen,

 

Thank you for the quick review!

 

May have helped saying what browser I am using lol - I was looking on Firefox and I get the issue described above, can confirm it works fine in Chrome and Safari.

 

I wonder what Firefox might be doing differently for this?

 

Updated: Should probably also say the apple mouse is fine, but the mousewheel feels like it has some sort of throttling when scrolling over it in Firefox 😕

 

Thanks,

Jack

Edited March 7 by jackkemm
More context

[mvaneijgen]

Instead of handling it in a setting. You could look in to doing this your self in the up and down check eg self.event.preventDefault() and see if Firefox likes that more? I've marked the topic, so maybe if someone else has inside they will probably post later to day. 

[jackkemm]

Thanks @mvaneijgen!

 

So that works the same as using preventDefault: true for me, but the mousewheel (on a logitech mouse for example) still has some type of dampening when scrolling over the container sadly.

 

I appreicate your help so far!

[Rodrigo]

Hi,

 

The issue with the scrolling lagging is completely related to Lenis, not a lot we can do there sorry.

 

As for the event handler, keep in mind that by default most event listeners are not passive except for some events. The wheel event is one of them:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive

 

It seems that you'll have to roll your own custom logic in this one since apparently Observer can't make all of this work in Firefox at least. This seems to work as expected in Chrome and Firefox on Ubuntu 20 & 22:

zoomContainer.addEventListener(
  "wheel",
  (e) => {
    if (e.ctrlKey) {
      e.preventDefault();
    }
  },
  { passive: false }
);

For anyone stumbling upon this thread because of a weird issue in Firefox with Lenis, please see and follow this issue in Lenis' Github:

https://github.com/darkroomengineering/lenis/issues/311

 

Hopefully this helps.

Happy Tweening!

[jackkemm]

Morning @Rodrigo,

 

I had my concerns Lenis may have been causing the lagging 🤦‍♂️

 

I'll give the recomendation a go and report back.

 

And thank you for considering putting something in place within Observer, it feels like a unique issue so i'm grateful!