Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set cursor style that indicates any direction scroll using CSS ?
The CSS cursor property allows you to change the mouse cursor style when hovering over elements. To indicate anydirection scrolling capability, you can use specific cursor values that show users they can scroll in multiple directions.
Syntax
selector {
cursor: value;
}
Possible Values for Direction Scroll
| Value | Description |
|---|---|
all-scroll |
Indicates content can be scrolled in any direction (panned) |
move |
Indicates something can be moved (similar to all-scroll on Windows) |
Method 1: Using all-scroll
The all-scroll value is specifically designed to indicate that content can be scrolled in any direction
<!DOCTYPE html>
<html>
<head>
<style>
.scrollable-area {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 2px solid #ccc;
cursor: all-scroll;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="scrollable-area">
Hover here to see all-scroll cursor
</div>
</body>
</html>
A gray box with centered text appears. When you hover over it, the cursor changes to a four-directional arrow indicating scrollable content.
Method 2: Using move
The move value provides similar functionality and works consistently across all platforms
<!DOCTYPE html>
<html>
<head>
<style>
.movable-content {
width: 250px;
height: 150px;
background-color: #e8f4fd;
border: 1px solid #007bff;
cursor: move;
padding: 20px;
margin: 20px;
border-radius: 8px;
}
.comparison {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.all-scroll {
cursor: all-scroll;
background-color: #fff3cd;
border-color: #ffc107;
}
</style>
</head>
<body>
<div class="comparison">
<div class="movable-content">
<strong>Move cursor</strong><br>
Hover to see move cursor
</div>
<div class="movable-content all-scroll">
<strong>All-scroll cursor</strong><br>
Hover to see all-scroll cursor
</div>
</div>
</body>
</html>
Two boxes appear side by side. The left box shows a move cursor (four-directional arrows with a small box in center), while the right box shows an all-scroll cursor (four-directional arrows) when hovered.
Best Practices
Use
all-scrollfor content areas that can be panned in multiple directionsUse
movefor draggable elements or when crossplatform consistency is importantApply these cursors to elements with actual scrollable or movable content
Conclusion
The cursor: all-scroll and cursor: move properties provide clear visual indicators for anydirection scrolling. Choose all-scroll for panning interfaces and move for better crossplatform compatibility.
560 Views
