时间戳

首页 > 解决方案 > 滚动div内的CSS div定位

css - 滚动div内的CSS div定位

问题描述

所以我有这个 div 容器（类 - h_scroll），这个 Div 有几个 div 会导致它水平滚动。所以我在我的 css 文件上设置了 div container(class - h_scroll) {overflow:scroll} 行为。div 完美滚动，但现在我想添加一个箭头，指示当一个滚动时还有更多项目，尝试 {position:absolute} 但箭头随页面滚动。即使页面滚动，如何使箭头保持在恒定位置。

*{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  scroll-behavior: smooth;
}
.deals_hscroll{
     position: relative;
     border: 1px solid #fff;
     flex-direction: row;
     flex-wrap: nowrap;
     border-radius: 20px;
     overflow-x: auto;
     display: flex;
     margin: auto;
     padding: 30px;
     width: 90%;
    }
    .deals_hscroll::-webkit-scrollbar{
     display: none;
    }
    .deals_hscroll .electro-item{
      display: inline-block;
      margin: 2px 30px;
      flex: auto;
    }
    .deals_hscroll .electro-item{
      display: inline-block;
      margin: 2px 30px;
      flex: auto;
    }
    
.scroll_more{
     background-color: #a4a4a8;
     justify-content: center;
     left: calc(100% - 100px);
     align-content: center;
     align-items: center;
     position: absolute;
     border-radius: 50%;
     font-weight: 1000;
     cursor: pointer;
     display: flex;
     height: 50px;
     width: 50px;
     top: 40%;
    }
    .scroll_more p{background-color: #00000000;}
<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <!-- meta headers defined here -->
  <meta charset="utf-8">
  <!-- other headers not shown here -->
  </head>
<body>
<div class="deals_hscroll">
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="electro-item">
           <p><img src="img.png" loading="lazy" alt="spectre"></p>
          </div>
          <div class="scroll_more"><p>&rarr;</p></div>
         </div>
         </body>
 </html>

标签： css

解决方案

您不能将箭头放在与卡片相同的 div 中，您必须将箭头分隔到与卡片父 DIV 相同的级别。

<div style="position:relative">
   //put all of your card here 
   <div class="deals_hscroll" >        
     <div class="electro-item">
       <p> 1st card</p>
     </div>
     <div class="electro-item">
       <p> 2nd card</p>
     </div>
   </div>  
   //put your arrow here with position absolute                                                                                                                    
   <div class="scroll_more">your arrow</div>
</div>

推荐阅读