Enable scroll function on mouse wheel event

Technical Support WebViewer
1

WebViewer Version: 11.7.1

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? No
Are you using the WebViewer server? Yes
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue:
I want to implement a function that updates the mouse wheel behavior based on a selected condition. When the condition changes, it should dynamically switch between zooming on mouse wheel and normal scrolling.

if (isZoomChecked) {
    PartialApryse.EnableMouseWheelZoom(UI, documentViewer);
}
if (isScrollChecked) {
    PartialApryse.EnableScrollOnMouseWheel(UI);
} 
EnableMouseWheelZoom: function (instance, documentViewer) {
    instance.addEventListener('mousewheel', (event) => {
        event.preventDefault();
        const currentZoom = documentViewer.getZoomLevel();
        const zoomFactor = 1.1;
        if (event.deltaY < 0) {
            documentViewer.zoomTo(currentZoom * zoomFactor);
        }
        else {
            documentViewer.zoomTo(currentZoom / zoomFactor);
        }
    });
},
EnableScrollOnMouseWheel: function (instance) {
    // Remove previous bound handler if present
    instance.removeEventListener('mousewheel', this._mouseWheelHandler);
    // Set empty handler (no preventDefault)
    this._mouseWheelHandler = function () {
        // Allow natural scrolling
    };
    instance.addEventListener('mousewheel', this._mouseWheelHandler);
},
3

Hello, I’m AiRon, an automated tech support bot :robot: While you wait for one of our customer support representatives, I can help you with your question.


It seems you want to switch between zooming and scrolling functionalities using the mouse wheel in Apryse’s WebViewer. This can be done by managing event listeners based on a condition. You need to ensure that the event listeners are properly added and removed to achieve dynamic switching seamlessly.

Some things you can try:

  • Initialize the WebViewer instance and set up your condition checks for zooming and scrolling.

  • Use addEventListener and removeEventListener to toggle between zooming and scrolling functionalities.

  • Ensure that each time a condition changes, the previous event listener is removed before adding the new one.

  • Within EnableMouseWheelZoom, prevent the default scrolling behavior and apply zoom based on the direction of the mouse wheel scroll.

  • For EnableScrollOnMouseWheel, allow the default behavior by not preventing the default action.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hi there,

You could do something like this:

let currentHandler = null; 

const EnableMouseWheelZoom = (instance) => {
  const { UI, Core } = instance;
  const { documentViewer } = Core;

  // Remove previous handler if any
  if (currentHandler) {
    UI.removeEventListener('mousewheel', currentHandler);
  }

  // Define new zoom handler
  currentHandler = (event) => {
    event.preventDefault(); // Stop normal scroll
    const currentZoom = documentViewer.getZoomLevel();
    const zoomFactor = 1.1;
    if (event.deltaY < 0) {
      documentViewer.zoomTo(currentZoom * zoomFactor);
    } else {
      documentViewer.zoomTo(currentZoom / zoomFactor);
    }
  };

  UI.addEventListener('mousewheel', currentHandler);
};

const EnableScrollOnMouseWheel = (instance) => {
  const { UI } = instance;

  // Remove previous handler so default scroll works
  if (currentHandler) {
    UI.removeEventListener('mousewheel', currentHandler);
    currentHandler = null;
  }
};

Best regards,
Kevin

1 Like