Disable Pinch Zoom but Allow Scroll with JavaScript - Stack Overflow

admin管理员组

文章数量:1188225

TL;DR: I need a JavaScript solution that disables pinch-zooming but preserves vertical two-finger scrolling on touchpads.

---

Generally speaking, on devices with touchpads - like laptops! - users are able to “zoom in” to a webpage by simply pinching or spreading two fingers. Additionally, users have the ability to scroll down a page by just using two fingers. This is called “two-finger scrolling.”

---

Some Context

I've been developing an online application that relies on a specific zooming feature as part of its functionality.

Since a major part of the application was to zoom in on a grid, I needed to disable this automatic pinch-to-zoom gesture that annoyingly zoomed into the actual content of the page, as opposed to the grid itself.

What I've Tried Already

Thankfully, after doing a lot of research, I finally found an answer that prevents users from being able to pinch-to-zoom. And what a relief, it actually works. (Code shown below)

JavaScript

window.addEventListener('wheel', event => {
    event.preventDefault() // Disable default behaviour
},{
    passive: false // Very important. Can be easy to overlook 
})

The Problem

This approach works well. However, the current issue is that - although this code does indeed disable pinch-zooming on a touchpad - it also disables standard two-finger scrolling. As a result, for devices with touchpads, some major text-based parts of my application are completely hidden from view, since two-finger scrolling also gets disabled.

---

I am looking for a JavaScript solution for touchpads that disables pinch-zooming but preserves two-finger scrolling. Am I missing something obvious in the code? Will I need to detect each finger input manually for this to work? Open to any suggestions!

Please note: I'm aware that it's generally discouraged to disable pinch-zoom on a webpage, but it is necessary for this application, as previously explained.

Thanks in advance!!

TL;DR: I need a JavaScript solution that disables pinch-zooming but preserves vertical two-finger scrolling on touchpads.

---

Generally speaking, on devices with touchpads - like laptops! - users are able to “zoom in” to a webpage by simply pinching or spreading two fingers. Additionally, users have the ability to scroll down a page by just using two fingers. This is called “two-finger scrolling.”

---

Some Context

I've been developing an online application that relies on a specific zooming feature as part of its functionality.

Since a major part of the application was to zoom in on a grid, I needed to disable this automatic pinch-to-zoom gesture that annoyingly zoomed into the actual content of the page, as opposed to the grid itself.

What I've Tried Already

Thankfully, after doing a lot of research, I finally found an answer that prevents users from being able to pinch-to-zoom. And what a relief, it actually works. (Code shown below)

JavaScript

window.addEventListener('wheel', event => {
    event.preventDefault() // Disable default behaviour
},{
    passive: false // Very important. Can be easy to overlook 
})

The Problem

This approach works well. However, the current issue is that - although this code does indeed disable pinch-zooming on a touchpad - it also disables standard two-finger scrolling. As a result, for devices with touchpads, some major text-based parts of my application are completely hidden from view, since two-finger scrolling also gets disabled.

---

I am looking for a JavaScript solution for touchpads that disables pinch-zooming but preserves two-finger scrolling. Am I missing something obvious in the code? Will I need to detect each finger input manually for this to work? Open to any suggestions!

Please note: I'm aware that it's generally discouraged to disable pinch-zoom on a webpage, but it is necessary for this application, as previously explained.

Thanks in advance!!

• javascript
• scroll
• zooming
• event-listener
• touchpad

Share Improve this question Follow edited Jan 27 at 17:49 Joachim asked Jan 24 at 20:27 JoachimJoachim 26544 silver badges1818 bronze badges 1

• 1 It seems the difference between zooming and scrolling comes down to e.ctrlKey being true, maybe that's a good start? Try window.addEventListener('wheel', event => { event.ctrlKey && event.preventDefault() }, { passive: false });? }` - Just tested this and it seems to do the trick. – somethinghere Commented Jan 27 at 18:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1 +50

One difference between wheel events that scroll and zoom seems to be that ctrlKey is set to true automatically in those events. With that knowledge, you could try this:

window.addEventListener( 'wheel', event => {

  if( event.ctrlKey ) event.preventDefault()
  
}, { passive: false })

html, body {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
}
div {
  height: 500vh;
  width: 100%;
  font-family: monospace;
  font-size: 10vw;
  background: linear-gradient(0deg, gray, white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
div span {
  position: sticky;
  top: 0;
}
div span + span {
  bottom: 0;
  margin-top: auto;
}

<div>
  <span>Zoom me</span>
  <span>You cannot</span>
</div>

That seems to do the trick.

本文标签： Disable Pinch Zoom but Allow Scroll with JavaScriptStack Overflow