علی اصغر کاظمپور
2 سال پیش
توسط علی اصغر کاظمپور
مطرح شد
مشکل overflow در دسکتاپ
توی موبایل خو ب کار میکنه ولی توی دسکتاپ اون همه باکس رو نشون نمیده
<!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>```گزینش سوالات
دسته بندی سوالات
تگهای محبوب
ثبت پرسش جدید
به همدیگه کمک کنیم
به علی اصغر کاظمپور کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.