Looking to create a horizontal page layout, but when I scroll with the mouse wheel the content only moves vertically. Is there a way to enable horizontal scrolling using the mouse wheel? Does CSS have a property for this?
For instance, is there something like:
mouse-wheel:horizontal;
I prefer not to use jQuery solutions.
To horizontally scroll the page, simply hold down the SHIFT key and use your mouse to scroll.
Turn the container upside down by -90 degrees, then rotate its child element by 90 degrees.
.container {
width: 180px;
height: 600px;
overflow-y: scroll;
transform: rotate(-90deg);
}
.content {
width: 140px;
height: 140px;
margin: 10px;
background-color: #a8a8df;
transform: rotate(90deg);
}<div class="container">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
<div class="content">Content 4</div>
<div class="content">Content 5</div>
<div class="content">Content 6</div>
<div class="content">Content 7</div>
</div>Check out Pieter Biesemans’ article on CSS Tricks for more information; he also includes browser compatibility details.
CSS solely focuses on styling elements and does not have the capability to control mouse or keyboard inputs; for that, JavaScript is required.
let container = document.getElementById("MAIN");
window.addEventListener("wheel", function (event) {
if (event.deltaY > 0) {
container.scrollLeft += 100;
} else {
container.scrollLeft -= 100;
}
});
Your designated container is identified with the ID "MAIN"
Unique styling not found in CSS
div {
scroll-direction: horizontal;
}
This could have been useful, but fear not, There is a solution
You can even create your own.
Simple with JavaScript
const container = document.getElementById("container");
// where "container" is the id of the container
container.addEventListener("wheel", function (e) {
if (e.deltaY > 0) {
container.scrollLeft += 100;
e.preventDefault();
// prevenDefault() will help avoid vertical scroll
}
else {
container.scrollLeft -= 100;
e.preventDefault();
}
});
// This method works perfectly
If you prefer using CSS, here is how you can create a container, rotate it, rotate the items, and enable scrolling.
The process:
container element and apply CSS styles:<!------ HTML ------>
<div class="container">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
<div>item 6</div>
<div>item 7</div>
<div>item 8</div>
</div>
/** CSS **/
.container {
width: 100px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
transform: rotate(-90deg);
transform-origin: right top;
transform:rotate(-90deg) translateY(-100px);
}
.container > div {
width: 100px;
height: 100px;
transform: rotate(90deg);
transform-origin: right top;
}
Hope this information is helpful!
There is a prefixed property in Microsoft IE 10 called -ms-scroll-translation, but unfortunately it is not widely supported at the moment. Despite this, it is still worth considering implementing for future compatibility.
Insert the following code snippet into your container:
onWheel= "this.scrollLeft+=event.deltaY>0?100:-100"For example:
<div class= "container" onWheel= "this.scrollLeft+=event.deltaY>0?100:-100" >
</div>
After a decade, I devised my own unique solution:
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.MAIN'); // .MAIN is a class that I believe will be more practical
container.addEventListener('wheel', function(event) {
if (event.deltaY !== 0) {
event.preventDefault();
container.scrollLeft += event.deltaY * 1;
}
});
});Manipulating mouse or keyboard inputs is not supported by CSS
If you want to achieve this functionality, one option is to use JQuery. Take a look at the example below:
http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Simply using CSS won't be enough to accomplish this task; Jquery must also be utilized. Check out the following link for an example of achieving horizontal scroll with Jquery.
Example link: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
Can someone please guide me on how to implement a check all and uncheck all functionality when I check individual checkboxes one by one? Once all checkboxes are checked, the 'checkall' checkbox should automatically be checked. Below is the code s ...
I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...
I need assistance with my code. I'm trying to draw an image on the canvas while maintaining its quality. const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 360px; canvas.height = 360px; const img ...
My task is to generate textareas with custom parameters like "cols" and "rows" and display them in forms. However, these parameters seem not to be functioning as expected. Whether I set cols=1000 or cols=1, there is no difference in the output. After revie ...
Javascript Function: My JavaScript function posted below is designed to iterate through the column indexes specified in the 2nd parameter and also iterate through the element ids provided in the 3rd parameter. It will then populate the textbox, radiobutto ...
<script type="text/javascript"> function PrintElem(elem) { Popup($(elem).html()); } function Popup(data) { var mywindow = window.open('', 'mydiv', 'height=550,width=750'); mywindow.doc ...
I need assistance with two jsFiddles: http://jsfiddle.net/kRyhw/3/ http://jsfiddle.net/kBMSa/1/ In the first jsFiddle, there is code that adds HTML to my ul element, including an 'X' icon in SVG format. Attempting to recreate this functionali ...
Hello there! I'm currently working on a project similar to . However, I am facing difficulties when integrating my code with a discord bot. I am questioning whether it is possible to host JSON data online directly with the code snippet below: documen ...
When working with images, it can be tricky to maintain the aspect ratio. For example, if you have an image set to a specific height like 500px within a div that is 960px wide, the image may stretch to fill the width. This can distort the image and give ver ...
I am a beginner with nodeJS and I am having trouble setting the src attribute of an img tag in my client side html. My node server is running on port 3000 and everything works fine when I visit http://localhost:3000. Here is the code from my server.js fil ...
I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...
Need help fixing the parallax effect on this page. I attempted to implement a parallax effect but encountered some issues. Here is the JavaScript code: $objWindow = $(window); $('section[data-type="background"]').each(function(){ var $bgOb ...
After relying solely on "pre-made" components like Mui or TailWind, I decided to create a component using only CSS and maybe JavaScript. However, I encountered some difficulties when attempting to position a div inside an image using relative and absolute ...
In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...
I'm trying to display an mp4 video in Angular 9: <video controls (click)="toggleVideo()" preload="none" *ngIf="post.moviePath != null" #videoPlayer> <source [src]="getMovieSanitazePath(post.moviePath ...
I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...
I am working on a MUI TreeView component that includes Categories as parents and Articles as children. Whenever I select a child item, it gets styled with a "selected" status. However, when I click on a parent item, the previously selected child loses its ...
Reviewing a colleague's CSS file, I stumbled upon an interesting section. They are a skilled CSS designer, so before jumping to conclusions, I wanted to make sure I am not missing something. In the code snippet below, it seems like they are unintenti ...
Currently, I have integrated a Radix UI's Alert Dialog in my Next.js 13 app to confirm the deletion of a contact from the user's contact list: Take a look at the Alert Dialog modal here However, there seems to be an issue with the delete button ...
My website currently features a navigation bar with 4 anchor links that direct users to different sections of the page. As you scroll down the page, the corresponding link on the nav bar lights up to signify your position on the site. Experience it yourse ...