مشکل 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>```

ثبت پرسش جدید

به همدیگه کمک کنیم

به علی اصغر کاظمپور کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

مشکل overflow در دسکتاپ

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

به همدیگه کمک کنیم

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید