Searching for a way to smoothly scroll horizontally from right to left using the mouse wheel?

I am looking to display 3 out of my collection of over 6 articles, with the ability for the user to scroll from right to left when using the mouse wheel. Additionally, I want to hide the scrollbar for a cleaner look.

Can anyone assist me with this?

I have attempted some code but encountered the same issue. Could you please review it?

jQuery(function ($) {
    $.fn.hScroll = function (amount) {
        amount = amount || 120;
        $(this).bind("DOMMouseScroll mousewheel", function (event) {
            var oEvent = event.originalEvent, 
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
                position = $(this).scrollLeft();
            position += direction > 0 ? -amount : amount;
            $(this).scrollLeft(position);
            event.preventDefault();
        })
    };
});

$(document).ready(function() {
    $('.full_screen_100').hScroll(60); // You can pass (optionally) scrolling amount
});
.horizontal_scroll .full_screen_100
{
width: 100%;
background-color: #fff;
   overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: text-top;
    margin: 0;
    padding: 0;
    clear: both;
    border-spacing: 5px;
}
.horizontal_scroll .full_screen_100 article{
width: 33%;
height: 100%;
  display: inline-block;
  border-left: solid 1px #E2E2E2;
   display: table-cell;

}
#left_scroll{
overflow-y: visible;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: text-top;
    margin: 0;
    padding: 0;
    clear: both;
    border-spacing: 5px
}
<div class="horizontal_scroll">
<div class="full_screen_100" id="left_scroll">
<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><

jqueryhtmlcsshorizontal-scrollingmousewheel

Answer №1

Vanilla JS

(function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();
#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}

#gentags > div{
    overflow: hidden;
    width:200%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 16.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}
<div id="gentags">
<div class="horizontal_scroll">
<div class="full_screen_100" id="left_scroll">
<article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
<article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
</div>
</div>
</div>

Answer №2

If you want to achieve horizontal scrolling, you can use the following code:

$(document).ready(function() {
  $('#left_scroll').bind('mousewheel', function(e) {
    this.scrollLeft -= (e.originalEvent.wheelDelta );
   });
  $('#left_scroll').bind('DOMMouseScroll', function(e) {//Specifically for Mozilla
    this.scrollLeft += (e.originalEvent.detail*40);//Multiplying by 40 because Mozilla DOMMouseScroll speed is 3px at a time to match scrolling speed of Chrome (which scrolls at a speed of 120px at a time)
   });
});

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

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

javascripthtmlcsstypescriptd3.js

Sending data to a JSON file with jQuery and AJAX: Step-by-step guide

While there are numerous tutorials available on how to retrieve data from json files using jQuery and ajax, I have been unable to find any that demonstrate how to POST data to a json file. If anyone has a script or example they could share with me on how t ...

jqueryajaxjsonpost

Pass the value of a variable from one component to another component by utilizing ngModel

I have a scenario where I am working with two components named first and second. The second component is calling the first component. Within the first component, there is a module called matslider that toggles on and off. My goal is to retrieve the status ...

htmlangularangular-materialangular-ngmodel

"Troubleshooting the malfunctioning of the jQuery submit function in Begin

There is a partial view called contactaddpopup.cshtml which contains the following form for adding a contact: @using (Html.BeginForm("Validation", "Contacts", FormMethod.Post, new { id = "myForm"})) ...

jquerydevexpresshtml.beginform

When using angular.less, the @import feature is functioning correctly but a 404 error is displayed in the

Currently, I am working on a project using AngularJS along with angular.less. To centralize all my constants, I have stored them in one .less file and imported it at the beginning of all my other less files using a relative path: @import "constants" Even ...

cssangularjsless

Is it possible to utilize a separate, standalone stylesheet for media queries?

My understanding of media queries evolved when I discovered them yesterday during my research on creating mobile-optimized pages. I learned that a media query refers to a stylesheet that complements and supersedes the current one, which differed from what ...

htmlmobilecssmedia-queries

What is the best way to align bars at the bottom of a CSS vertical bar chart?

Currently, I am exploring the functionality of two distinct bar charts that I designed using HTML and CSS: one horizontal and the other vertical. Is there a way to shift the bars in my vertical bar chart from the center down to the bottom? https://i.sstat ...

htmlcss

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...

javascripthtmlcssdjango

Tips for retrieving the user-input value from an HTML text field

Exploring the world of JS, I set out to create a basic calculator after just one week of lessons. However, I hit a roadblock when trying to extract user-input values from my HTML text fields. Here's a snippet of my html: <div class="conta ...

javascripthtml

The right-floating div element is not displaying horizontally; instead, it is breaking into a new line

My issue is the dynamically added div elements are not displaying horizontally within a container div element with a specific width. They always break into a new line. Below is the code snippet I am using: var i=1; $(document).ready(function () { ...

jqueryhtmlcss

Verify if the ajax request does not contain any data

Utilizing the complimentary geocoding API provided by MapQuest I'm attempting to verify the success of a request that returned no data. Entering "vdfsbvdf54vdfd" (a nonsensical string) as an address in a form field, I anticipate receiving an alert s ...

javascriptjqueryajaxgeocodingmapquest

Struggling to modify the page width using CSS and HTML on Wordpress, facing unexpected limitations

I've exhausted all my options. I've attempted to add a certain % page width globally using CSS in the editor, page template, and customizer but it's just not working. It's frustrating because I'm using the Twenty Twenty Two theme, ...

csswordpress

Problem encountered while extracting data from HTML structure using indexing

My current task involves scraping data from a specific html structure found on 30-40 webpages, such as the one below: https://www.o2.co.uk/shop/tariffs/sony/xperia-z-purple/: <td class="monthlyCost">£13<span>.50</span></td> ...

pythonhtmlpython-2.7html-parsingbeautifulsoup

Verify if a <select> element exists inside the main div

Is there a way for me to check if a <select> element is present within the parent div and display certain content based on its existence? Appreciate any assistance! ...

javascriptjqueryhtml

Guide on selecting a radio button based on data retrieved from a MySQL database

How can I populate my radio button in an edit form with data from MySQL by writing the value in the radio button? Below is the code snippet: foreach($arrAnswer as $ans) { <input name = "answer_'.$i.'" type="radio" value="' ...

phphtmlcodeigniter

What is the method for linking to another page ID using an <a href> tag?

On one of my pages, I have a section that references another page's div id to trigger a click event for editing specific form fields. This is the profile page: <a href="<?php echo base_url('settings_pro/edit'); ?>" name="pull-righ ...

javascriptphpjquerymysqlcodeigniter

Obtain distinct values from an array of dictionaries and form a new dictionary

Looking at the JSON data provided below: [{ "name": "Il Brigante", "rating": "5.0", "match": "87", "cuisine": "Italian", "imageUrl": "/image-0.png" }, { "name": "Giardino Doro Ristorante", "rating": "5.0", "match": "87", ...

javascriptjqueryjsonexpressdictionary

Cross-domain PHP AJAX using jQuery

While working on my web application, I encountered a challenge with an iframe from a different domain. Despite writing jQuery scripts in the iframe to pass data to the parent window, JavaScript restrictions prevent direct communication between domains. To ...

phpjqueryajax

Fade out the div element when clicked

For my game project, I needed a way to make a div fade out after an onclick event. However, the issue I encountered was that after fading out, the div would reappear. Ideally, I wanted it to simply disappear without any sort of fade effect. Below is the co ...

javascripthtmlcssonclick

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

javascripthtmlcss