Disabling vertical scrolling is achieved by binding this mousewheel event handler

On my website, I have implemented vertical scrolling without a scrollbar and one specific div also has horizontal scrolling without a scrollbar.

The code I am using is as follows:

(function() {
  function scrollHorizontally(e) {
    e = window.event || e;

    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    document.getElementById("premios-scroll").scrollLeft -= (delta * 40); // Multiplied by 40
    document.getElementById("premios-scroll").scrollLeft -= (delta * 40); // Multiplied by 40

    e.preventDefault();
  }

  if (window.addEventListener) {
    // Works in IE9, Chrome, Safari, Opera
    window.addEventListener("mousewheel", scrollHorizontally, false);

    // Works in Firefox
    window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
  }
  else {
    // For older browsers like IE 6/7/8
    window.attachEvent("onmousewheel", scrollHorizontally);
  }
})();

While the above code functions properly for horizontal scrolling, it unfortunately disables vertical scrolling on the webpage. You can view the website here.

Answer №1

Is it possible to enable horizontal scrolling only when hovering over the premios-scroll target using event mouseover?

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

Field types: Elements encased within square brackets

When using Flow Types: export type GroupType = { options: OptionsType, [string]: any, }; What does the syntax [string]: any signify? Edit : Appreciate all the responses provided. How should I interpret this particular piece of code? import type { ...

How can I ensure a div always moves to the right by using margin-right auto?

How can I align a div to the right using margin-right auto? I attempted margin-right: auto; and margin: 0 0 0 auto; but it was not successful. ...

redirecting a user to the login page can be achieved by following these steps

In my NodeJS backend service, I am utilizing the http-proxy-middleware library to set up a proxy and redirect users to the corresponding frontend service based on their user type. Both services are running in Kubernetes. Assume that https://example.com is ...

AJAX response from open cart is returning null JSON data

Hey there, I'm having a problem with my ajax request. It seems like I keep receiving a null value for json. Let me show you the JavaScript code... <script> $(document).ready( function() { $('#donate-box-submit').on('click' ...

Revamp the HTML page by automatically refreshing labels upon every Get request

My HTML webpage requires real-time updates for one or more labels. To achieve this, I have incorporated CSS and JS animations into the design. Currently, I am utilizing Flask to handle all the calls. I face a challenge where I need to consistently update ...

Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work... Here is the HTML: <a href="#" id="LoginAnchorLink">ClickME</a> < ...

Audio playback system in Node.js

I'm looking to create a seamless playlist of mp3 files that play one after the other. While it may seem straightforward, I'm facing challenges keeping the decoder and speaker channel open to stream new mp3 data in once a song finishes playing. Be ...

Has Next.js incorporated a maximum cache size feature along with an invalidation algorithm like LRU?

Currently, I have a Next.js site that utilizes getServerSideProps for data fetching. However, I am interested in switching to getStaticProps and implementing incremental static regeneration (ISR) for improved performance. Currently, my memory usage is ap ...

Troubleshooting the CORS problem with 'Access-Control-Allow-Origin' while combining Vue.js for the front-end and Express for the back-end

While attempting to make a call to my API on Jazz using Vue.js and Axios, I encountered the following error: Access to XMLHttpRequest at ' _here' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight ...

What is the best way to create a uniform appearance for all five columns in a bootstrap grid?

My goal is to create a layout with 5 columns on extra large screens, 4 columns on large screens, and 2 columns on small/extra small screens. Currently, my code looks like this: <div class="row mb-5"> {% for item in foobar %} <div ...

Using material community icons in conjunction with react-native-vector-icons

I am facing an issue with displaying the store-front icon from the Material Community Icons library in my React Native app. Here is the code snippet causing the problem: import { StatusBar } from "expo-status-bar"; import React from "react&q ...

What is the best way to initiate a change event using JavaScript?

I am attempting to enable my 4th checkbox automatically when there is a new value in the textbox (myinput). If the textbox is empty, I want to disable it. Currently, you have to tab out before the change event is triggered. Also, how can I check for an e ...

Vue not triggering computed property sets

As per the guidelines, I should be able to utilize computed properties as v-model in Vue by defining get/set methods. However, in my scenario, it isn't functioning as expected: export default{ template: ` <form class="add-upload&quo ...

Looking to spice up your static HTML site? Dive into the world of Ruby on

I recently developed an app that features a static HTML webpage containing text and images, and now I'm interested in incorporating Ruby on Rails to explore its capabilities further. After creating a basic RoR application, I copied the HTML content f ...

Exploring jQuery Mobile - What Causes an Empty State?

Using $.mobile.navigate("#test-page", {id:123}) for navigation to a secondary page seems to be successful. The transition between pages is smooth.... but the state remains empty! According to the documentation, the state should contain all necessary info ...

Ways to showcase INPUT TYPE when making a Selection?

I've been struggling with a simple issue and despite trying multiple solutions, I can't seem to get it right. I have a form where I'm using the <select> tag with two options: coo and uh. What I want is for an additional input type fiel ...

A guide to loading CSS and JavaScript files asynchronously

Is it possible to use loadCSS (https://github.com/filamentgroup/loadCSS/blob/master/README.md) to allow the browser to asynchronously load CSS and JavaScript? This is what I currently have in my head tag: <link rel="preload" href="http://zoidstudios. ...

Add the 'table' class to a WooCommerce table following an AJAX request

When it comes to WooCommerce-tables, there are predefined classes such as shop_table shop_table_responsive cart woocommerce-cart-form__contents. Surprisingly, there is no table class included, which means Bootstrap tables cannot be utilized easily. Intere ...

Trouble with background images appearing on screen

My folder structure looks like this: main directory index.html css image(directory) I have attempted to use the following code: background-image: url("../images/vegies.jpg") no-repeat; ("images/vegies.jpg") no-repeat; ...

Comparing strings in AngularJS

Struggling to compare two strings in AngularJS, I've come across various examples online. From what I understand, there are different methods like angular.equals(str1, str2), ===, and == if you're certain both are strings... Despite trying all t ...