Is there a way to turn off two finger scrolling on a Macbook using JavaScript?

Hey there! I'm facing a little dilemma. I've got this div container that's 300px wide, positioned relative, and has an overflow hidden property. Inside it, there are two child divs with absolute position. I'm using CSS3 to translate them with -transform: translate3d(0, 0, 0) initially, then on click transforming them to translate3d(-400px, 0, 0) and vice versa. It all works perfectly fine on Windows, but here's the catch - when I try to scroll using two fingers on a Mac or MacBook system, the div container overflows and reveals the translated div (sometimes showing white empty spaces). Any ideas how to fix this issue?

javascriptmacoscsstrackpad

Answer №1

It is not possible to perform a two finger scroll on a MAC computer. The two finger gesture is the primary way in which MAC users interact with their hardware.

To prevent scrolling on a MAC device, you can check if the user is using a MAC computer and then set the overflow property of your div to hidden.

You can achieve this by adding the following code:

var isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;

if (isMac) {
  document.getElementById('container').style.overflow = 'hidden';
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to utilize DataTable in R Shiny to connect rowCallback and formatStyle functions for customizing the appearance and presentation of your data

Is it possible to utilize both rowCallback and stypeEqual formatting features in one tab when using two tabs to display a data frame in R Shiny? datatable(DF, options = list(rowCallback=JS("function(row,data) { data[0] = data[0] .replace(/NxG/g,&apo ...

javascriptrshiny

Guide to implementing the HttpOnly flag in a Node.js and Express.js application

Hey there! I'm currently working on a project using node.js and I need to ensure that the HttpOnly flag is set to true for the header response. I've written this code snippet in my app.js file but it doesn't seem to be affecting the respons ...

javascriptnode.jsexpress

Pressing the up arrow in Javascript to retrieve the most recent inputs

Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...

javascripthtmljquerymemoryinput

No matter how many times I define the JavaScript variable in my Express.js and MongoDB setup, it

Recently, I've been delving into Node.js and Express.js to work on a small application that pulls data from Mongo Db and presents it using Jquery datatables on the front-end with server-side processing. I've managed to retrieve the necessary dat ...

javascriptnode.jsmongodbexpressdatatables

How to intercept a post request from JavaScript in a JavaFX WebView

Exploring JavaFX for the first time has brought me to the intriguing WebView class. I am interested in using it to locally host an HTML5 site as the front end for a desktop application. I have a question regarding ajax requests made from JavaScript within ...

javajavascriptajaxhtmljavafx

Correlating Mailgun Webhook event with Mailing list email

Recently, I have started using the Mailgun API to send emails and have also begun utilizing their mailing list feature. When sending to a mailing list, such as [email protected], I receive a single message ID. However, when receiving webhook responses, t ...

javascriptnode.jswebhooksmailgun

Exploring Angular2: A Guide to Interpolating Expressions in Templates

Is it possible to interpolate different types of Javascript expressions? Along with displayed properties like object.property and short expressions such as {{1+1}}, what other valid Javascript expressions can be used for interpolation? ...

javascriptangularangular2-templateangular2-directivesangular2-components

Preventing the Express server from becoming unresponsive while processing a GET request

Hello everyone, I am seeking assistance with an issue I am facing. I am new to Express and Node.js and currently working on creating a learning journal. Initially, everything was working fine with the normal pages. However, when I started creating the admi ...

javascriptnode.jsexpressviewserver

Utilizing CSS to create a visually striking effect with oversized standalone images seamlessly integrated into a div

I am currently faced with the challenge of incorporating large PNG images into the background of a website, all while utilizing Bootstrap 4. My goal is to ensure that when a user resizes the screen, these images remain fixed in place as part of the backgro ...

cssimagebootstrap-4background

What is the best way to tile textures in Three.js without causing distortion?

Despite trying various solutions, I am still facing an issue where my textures appear to be stretched or scaled based on the mesh size. In a bid to seek a resolution, here are some key points to note: All textures have dimensions of 64x64 pixels I have p ...

javascriptthree.jstexturestexture-mapping

Issue with Ionic: The view list does not reflect updated data in the controller

I am a beginner with Ionic and I'm attempting to dynamically add a list of items. I have a local JSON file and a button in my default dash.html. This button, when clicked, reads the barcode and checks if the number is available in the local JSON file. ...

javascriptangularjsjsonionic-framework

Encountering the "Error: JSON.parse: unexpected character" when trying to retrieve JSON data using AngularJS

I've been struggling with this issue for the past few days. Every time I attempt to fetch a JSON object using Angular's $http.get method, I encounter the error message "Error: JSON.parse: unexpected character". The JSON data is generated using P ...

javascriptphpjsonangularjs

How can I incorporate image carousel indicators into a jQuery image slideshow without using bootstrap?

Currently, I am working on creating an image carousel from scratch without using bootstrap. The main functionality is in place, but I would like to add some carousel indicators at the bottom to show which slide is currently being displayed, similar to how ...

javascriptjquerycsstwitter-bootstrap

Merging and sorting a two-dimensional array in JavaScript

Given the following 2D array: 1230 | this is a test 1278 | my new test 1230 | test2 7654 | testing... I am looking to transform the array so that values in the first column are unique and the second column stores the concatenated text associated with eac ...

javascriptarrays

What is the best way to add animation to a button within a form using CSS?

Creating a Form in index.html: <form id="mc-embedded-subscribe-form" class="validate" name="mc-embedded-subscribe-form" method="post" action="mailing.php"><pre> <fieldset> <div class="mc-field-group"> <div class="input-cont"> ...

css

Selenium in Perl: Facing a puzzling JavaScript error while attempting to resize window

Utilizing the Perl Selenium package known as WWW::Selenium, I have encountered a perplexing JavaScript error while attempting to resize the browser window. The error message reads: "Threw an exception: missing ; before statement". Below is the code snippe ...

javascriptperlselenium

utilizing the setState function to insert an object into a deeply nested array

Currently, I am utilizing iReact setState to attempt posting data to my object which consists of nested arrays. Below is how my initial state looks: const [data, setData] = useState({ working_hours: [ { id: '', descrip ...

javascriptreactjs

Maintaining text color while adding a color overlay to a Bootstrap Jumbotron

After searching extensively, I couldn't find any mention of this particular issue. According to the Bootstrap 4.2 documentation on the Jumbotron, I constructed my div with an inline background image. However, when I attempted to apply an overlay on to ...

cssbootstrap-4background-image

Looking to update properties for elements within the Angular Material 16 mat-menu across the board?

Currently working with Angular Material 16 and I have a question regarding the height of buttons inside the mat-menu element. Here is an example of the code: <button mat-icon-button> <mat-icon>more_vert</mat-icon> </button> ...

cssangularangular-material

Modifying JQuery function to target two IDs instead of just one

I am utilizing a bootstrap 5 tablist on my website that allows for navigating between tabs using custom left and right arrows. If I wish to introduce a second bootstrap 5 tablist with a new unique ID, how can I modify the code to integrate the new ID and e ...

javascriptjquerytwitter-bootstrap