توی موبایل خو ب کار میکنه ولی توی دسکتاپ اون همه باکس رو نشون نمیده
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.sectionanime-121-q{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.image-123{
width: 10rem;
border-radius: 10px;
}
.box-q12{
margin-left: 10px;
text-align: center;
scroll-snap-align: start;
}
.sectionanime-121-q {
overflow-x: auto;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.sectionanime-121-q::-webkit-scrollbar {
display: none;
}
.box-q12 {
scroll-snap-align: start;
cursor: grab;
}
.box-q12:active {
cursor: grabbing;
}
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.no-drag {
-webkit-user-drag: none;
user-drag: none;
}
</style>
<body style="padding: 0%;">
<div class="movie-box">
<div class="title">new post</div>
<div class="sectionanime-121-q">
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
<div class="box-q12">
<img src="/page/pageof/5.jpg" alt="image" class="image-123">
<div class="title-anime12">bleach</div>
</div>
</div>
</div>
</body>
</html>
<script>
const container = document.querySelector('.sectionanime-121-q');
let isDragging = false;
let startX;
let scrollLeft;
let walked;
container.addEventListener('mousedown', e => {
isDragging = true;
startX = e.pageX - container.offsetLeft;
scrollLeft = container.scrollLeft;
});
container.addEventListener('mouseleave', () => {
isDragging = false;
});
container.addEventListener('mouseup', () => {
isDragging = false;
let inertiaInterval = setInterval(() => {
container.scrollLeft += walked;
walked *= 0.95;
if(Math.abs(walked) < 1) {
clearInterval(inertiaInterval);
}
}, 10);
});
container.addEventListener('mousemove', e => {
if(!isDragging) return;
const x = e.pageX - container.offsetLeft;
walked = (x - startX) * -3;
if (walked > 0) {
container.scrollLeft = scrollLeft + walked * 0.2;
} else {
container.scrollLeft = scrollLeft - Math.abs(walked) * 0.2;
}
});
</script>```
به علی اصغر کاظمپور کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟