允许用鼠标抓取和拖动带有 Overflow-X 的元素吗？答案

【问题标题】：Allow element with Overflow-X to be grabbed and dragged with a mouse?允许用鼠标抓取和拖动带有 Overflow-X 的元素吗？
【发布时间】：2021-03-29 22:29:42
【问题描述】：

所以，我有一个使用 overflow-x 滚动的可滚动 div，并且我已经隐藏了滚动条。现在我需要找到一种方法让触摸板或鼠标能够滚动div。它仅在使用触摸屏或移动设备时滚动，我已经使用 DevTools 进行了测试。

:root{
  --primary:#0a2a6d;
  --black:#000c27;
  --white:#ffffff;
  --grey:#d9d9d9;
  --dark:#8a8a8a;
}
.product{
  cursor: pointer;
  display:inline-block;
  width:275px;
  margin-left:0.7%;
  margin-right:0.7%;
  text-align:left;
  /* margin:auto; */
  height:365px;
  border:var(--grey) 1px solid;
  overflow: hidden;
  border-radius:20px;
}
.info{
  position: relative;
  top:-25px;
  font-size: 40px;
  margin:0;
  color:var(--black);
  margin-top:2px;
  margin-left:10px;
}
.rating{
 position: relative;
 left:-75px;
 top:-10px;
 transform: scale(0.4);
}
.product-list{
  user-select: none;
  margin-left:0.7%;
  margin-right:0.7%;
  overflow-x: scroll;
  white-space: nowrap;
}
.product-list::-webkit-scrollbar {
  display:none;
}
.img{
  width:300px;
  height:222px;
  object-fit: cover;
}
.product span{
  font-size:20px;
}h5{
  font-weight:500;
  font-size:20px;
  margin:0;
  margin-top:10px;
  margin-left:10px;
}

<div class="product-list">
    <div class="product">
      <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false">
        <h5>Flower Centerpiece</h5>
        <svg viewBox="0 0 102 18" class="rating">
          <use xlink:href="#stars-star" fill="#dc143c"></use>
              <use xlink:href="#stars-star" transform="translate(21)"></use>
              <use xlink:href="#stars-star" transform="translate(42)"></use>
          <use xlink:href="#stars-full-star" transform="translate(63)"></use>
              <use xlink:href="#stars-half-star" transform="translate(63)"></use>
              <use xlink:href="#stars-full-star" transform="translate(84)"></use>
        </svg>   
        <p class="info"><span>Rented for <b>3</b> days</span></p>
    </div>
    <div class="product"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false"><h5>Flower Centerpiece</h5><svg viewBox="0 0 102 18" class="rating"><use xlink:href="#stars-star" fill="#dc143c"></use><use xlink:href="#stars-star" transform="translate(21)"></use><use xlink:href="#stars-star" transform="translate(42)"></use><use xlink:href="#stars-full-star" transform="translate(63)"></use><use xlink:href="#stars-half-star" transform="translate(63)"></use><use xlink:href="#stars-full-star" transform="translate(84)"></use>/svg&gt;</svg><p class="info">16<sup>99</sup><span> per day</span></p></div><div class="product"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false"><h5>Flower Centerpiece</h5><svg viewBox="0 0 102 18" class="rating"><use xlink:href="#stars-star" fill="#dc143c"></use><use xlink:href="#stars-star" transform="translate(21)"></use><use xlink:href="#stars-star" transform="translate(42)"></use><use xlink:href="#stars-full-star" transform="translate(63)"></use><use xlink:href="#stars-half-star" transform="translate(63)"></use><use xlink:href="#stars-full-star" transform="translate(84)"></use>/svg&gt;</svg><p class="info">16<sup>99</sup><span> per day</span></p></div><div class="product"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false"><h5>Flower Centerpiece</h5><svg viewBox="0 0 102 18" class="rating"><use xlink:href="#stars-star" fill="#dc143c"></use><use xlink:href="#stars-star" transform="translate(21)"></use><use xlink:href="#stars-star" transform="translate(42)"></use><use xlink:href="#stars-full-star" transform="translate(63)"></use><use xlink:href="#stars-half-star" transform="translate(63)"></use><use xlink:href="#stars-full-star" transform="translate(84)"></use>/svg&gt;</svg><p class="info">16<sup>99</sup><span> per day</span></p></div><div class="product"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false"><h5>Flower Centerpiece</h5><svg viewBox="0 0 102 18" class="rating"><use xlink:href="#stars-star" fill="#dc143c"></use><use xlink:href="#stars-star" transform="translate(21)"></use><use xlink:href="#stars-star" transform="translate(42)"></use><use xlink:href="#stars-full-star" transform="translate(63)"></use><use xlink:href="#stars-half-star" transform="translate(63)"></use><use xlink:href="#stars-full-star" transform="translate(84)"></use>/svg&gt;</svg><p class="info">16<sup>99</sup><span> per day</span></p></div><div class="product"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false"><h5>Flower Centerpiece</h5><svg viewBox="0 0 102 18" class="rating"><use xlink:href="#stars-star" fill="#dc143c"></use><use xlink:href="#stars-star" transform="translate(21)"></use><use xlink:href="#stars-star" transform="translate(42)"></use><use xlink:href="#stars-full-star" transform="translate(63)"></use><use xlink:href="#stars-half-star" transform="translate(63)"></use><use xlink:href="#stars-full-star" transform="translate(84)"></use>/svg&gt;</svg><p class="info">16<sup>99</sup><span> per day</span></p></div><div class="product"><img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/diy-wedding-decorations-1582647454.jpg?crop=0.670xw:1.00xh;0.221xw,0&amp;resize=640:*" class="img" draggable="false"><h5>Flower Centerpiece</h5><svg viewBox="0 0 102 18" class="rating"><use xlink:href="#stars-star" fill="#dc143c"></use><use xlink:href="#stars-star" transform="translate(21)"></use><use xlink:href="#stars-star" transform="translate(42)"></use><use xlink:href="#stars-full-star" transform="translate(63)"></use><use xlink:href="#stars-half-star" transform="translate(63)"></use><use xlink:href="#stars-full-star" transform="translate(84)"></use>/svg&gt;</svg><p class="info">16<sup>99</sup><span> per day</span></p></div></div>

我将如何解决这个问题？

【问题讨论】：

标签： javascript html css scroll

【解决方案1】：

我会在通常滚动条所在的位置添加一个额外的透明 div。当悬停在它（或滚动条）上时，滚动条是可见的。当不将鼠标悬停在其中一个上时，滚动条是不可见的。

您也可以仅使用media queries 将此功能设为桌面

【讨论】：