代码之家 › 专栏 › 技术社区 › R3FL3CT

是否允许用鼠标抓取并拖动带有溢出-X的元素?

scroll css html javascript

R3FL3CT · 技术社区 · 5 年前

所以,我有一个可滚动的div使用 overflow-x 滚动,我把滚动条藏起来了。现在我需要找到一种方法,让触摸板或鼠标能够滚动屏幕 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>

我该如何着手解决这个问题?

0 回复 | 直到 5 年前

Kai Lehmann 5 年前

我会在滚动条的正常位置添加一个额外的透明div。当鼠标悬停在滚动条上时,滚动条是可见的。当不在其中一个上方悬停时,滚动条不可见。

您也可以只使用 media queries