xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Scrollable Div Cards with Mouse Scroll Wheel</title>
<style>
#card-container {
height: 300px;
overflow-y: scroll;
/* hide the scrollbar */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* hide the scrollbar in webkit browsers */
#card-container::-webkit-scrollbar {
display: none;
}
#card-container {
height: 300px;
overflow-y: scroll;
}
.card {
display: block;
width: 200px;
height: 300px;
margin-bottom: 10px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="card-container" onwheel="scrollVertically(event)">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
<script>
function scrollVertically(event) {
event.preventDefault();
const container = document.getElementById("card-container");
container.scrollTop += event.deltaY;
}
</script>
</body>
</html>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Horizontal Scrollable Div Cards with Mouse Scroll Wheel</title>
<style>
#card-container {
white-space: nowrap;
overflow-x: scroll;
/* hide the scrollbar */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* hide the scrollbar in webkit browsers */
#card-container::-webkit-scrollbar {
display: none;
}
#card-container {
white-space: nowrap;
overflow-x: scroll;
}
.card {
display: inline-block;
width: 200px;
height: 300px;
margin-right: 10px;
background-color: #eee;
}
</style>
</head>
<body>
<div id="card-container" onwheel="scrollHorizontally(event)">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
<div class="card">Card 7</div>
<div class="card">Card 8</div>
<div class="card">Card 9</div>
<div class="card">Card 10</div>
</div>
<script>
function scrollHorizontally(event) {
event.preventDefault();
const container = document.getElementById("card-container");
container.scrollLeft += event.deltaY;
}
</script>
</body>
</html>