I want to design a horizontal page. When I use mouse wheel it just scrolls content vertically. How can I use horizontal scroll by mouse wheel? Does CSS support this property? For example any thing like this:
CSS not, JS does support it. jQuery is not necessary. I’ve tested Calvins answer below and works great.
8 Answers 8
We can scroll the page horizontally by SHIFT key + scroll through mouse.
Like @CollinAnderson, its none of my business but a cool trick. My thanks is in the form of upvote. 😉
Rotate the container by –90 degrees, then rotate its child element by 90 degrees.
Content 1
Content 2
Content 3
Content 4
Content 5
Content 6
Content 7
See Pieter Biesemans’ article on CSS Tricks about it; he also lists browser compatibility.
I noticed the scroll bar is on top of the div. Swap the rotate value of container and content. The Container is 90deg and Content is -90deg.
CSS does not support manipulation of mouse or keyboard inputs; input controls can only be manipulated via JavaScript.
I disagree with «CSS does not support manipulation of mouse». CSS interacts with mouse in many ways such like pointer-events , cursor , or :hover . I personally think CSS should have proper way to direct mouse wheels on element.
var item = document.getElementById("MAIN"); window.addEventListener("wheel", function (e) < if (e.deltaY >0) item.scrollLeft += 100; else item.scrollLeft -= 100; >);
Where «MAIN» is your container
perfect! I even ID’d html tag to MAIN and worked perfect. Just one thing, when adding e.preventDefault(); inside the function, it doesn’t makes a difference to avoid conflict of vertical and horizontal scrolling on elements that have the possibility. What could be wrong there?
It is scrolling up/down and left/right simultaneously — how to prevent scrolling vertically then? As David suggested preventDefault is not working.
Can even make it shorter: (event) => event.currentTarget.scrollLeft += event.deltaY . Don’t need getElementById — get if from the event. Don’t need the if — deltaY can be +100 / 0 / -100.
There is no style like this in css
That could have been very handy. But YET, You have a way to do it You can also create your own. Easy 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 worrisome // inclusion of vertical scroll >else < container.scrollLeft -= 100; e.preventDefault(); >>); // That will work perfectly
Or if you like to do CSS, this will create the container, rotate it, rotate the items, and scroll. The steps:
I consider myself pretty good with CSS, but I just started working on something I realized I have no clue how to approach: A color wheel. Like this: Can this even be done in CSS? If so, how? I would rather not have to make it in canvas if not necessary. The same goes for SVG, but I’d prefer that to canvas. Edit: If it could be «clean» (like the sections are the correct individual shapes rather than larger shapes laid on top of each other) so I could animate the individual sections later, like pop them out on hover, that would be nice. I understand if it can’t be done like that though.
I’d say SVG is probably your best bet. This way, you can target the individual parts with CSS to add hover effects and the like.
4 Answers 4
You could achieve this just in CSS by using conical gradients and specifying stopping points for each of the colors, so they are clearly delimited.
In your particular case, you have 12 colors, which means that each stop point will be at 100% / 12 = 8.333%. Color 1 from 0 to 8.333%, color 2 from 8.333% to 16.666%, color 3 from 16.666% to 25%, etc. The syntax would be like this (with fake colors):
background: conic-gradient(red 0% 8.333%, blue 8.333% 16.666%, . );
Conical gradients are just fairly-supported at the moment of writing this answer: Chrome, Chromium-based browsers, and Safari support it; Firefox only by activating a flag (hopefully it will soon be complete support); And support for it on Edge (pre-Chromium), IE, or mobile is spotty.
Here is one way of creating a color wheel in CSS with conical gradients and variables:
