Question

我试过这个......

的 HTML 的

<div class="container">
   <div class="snack-section">
      <ul>
          <li><a><img src="images/demimore.png" alt="MILEY CYRUS DEMIMORE"></a></li>
          <li><a><img src="images/mako.png" alt="MAKO MERMAIDS"></a></li>
          <li><a><img src="images/supernatural.png" alt="SUPERNATURAL"></a></li>
          <li><a><img src="images/labpart.png" alt="THE LAB RATS"></a></li>
          <li><a><img src="images/water.png" alt="JUST ODD WATER"></a></li>
          <li><a><img src="images/scooby.png" alt="SCOOBY-DOO!"></a></li>
          <li><a><img src="images/videogirl.png" alt="VIDEO GIRL"></a></li>
          <li><a><img src="images/heartdixi.png" alt="HART DIXIE"></a></li>
          <li><a><img src="images/jimmy.png" alt="JIMMY NEUTRON"></a></li>
          <li><a><img src="images/expandable.png" alt="EPANDABLES 2"></a></li>
          <li><a><img src="images/demimore.png" alt="MILEY CYRUS DEMIMORE"></a></li>
      </ul>
   </div>
</div>

我需要从所有方向滚动内部div。我试过这个但是失败了......

的 CSS 的

.snack-section{
  position:fixed;
  overflow:auto;
  left:0;
  right:0;
  height:500px;
}

任何帮助都会得到满足。提前谢谢......

Answer 1

您只能在移动设备上执行此操作。不幸的是，在Web浏览器中，滚动条将可见。

相反，虽然在美学上没有滚动条会很好，但用户可能不知道视口之外还有内容，并且您的应用/网站可能变得不太可用。

实现这一目标可能有很多方法。您可以使用绝对定位的div隐藏滚动条。只是一个粗略的例子，可能需要更多的调整。

<强> HTML

<div class="container">
   <div class="wrapper">
    <div class="snack-section">
      <ul>
          <li><a><img src="images/demimore.png" alt="MILEY CYRUS DEMIMORE"></a></li>
          <li><a><img src="images/mako.png" alt="MAKO MERMAIDS"></a></li>
          <li><a><img src="images/supernatural.png" alt="SUPERNATURAL"></a></li>
          <li><a><img src="images/labpart.png" alt="THE LAB RATS"></a></li>
          <li><a><img src="images/water.png" alt="JUST ODD WATER"></a></li>
          <li><a><img src="images/scooby.png" alt="SCOOBY-DOO!"></a></li>
          <li><a><img src="images/videogirl.png" alt="VIDEO GIRL"></a></li>
          <li><a><img src="images/heartdixi.png" alt="HART DIXIE"></a></li>
          <li><a><img src="images/jimmy.png" alt="JIMMY NEUTRON"></a></li>
          <li><a><img src="images/expandable.png" alt="EPANDABLES 2"></a></li>
          <li><a><img src="images/demimore.png" alt="MILEY CYRUS DEMIMORE"></a></li>
      </ul>
    </div>
   </div>
</div>

<强> CSS

.wrapper {
 position:absolute;
 overflow:hidden;
 left:0; right:0;
 height: 500px;
}

.snack-section{
  position:absolute;
  overflow:auto;
  left:0;
  right:-24px;
  padding-right:24px;
  height:500px;
  padding-bottom:24px;
}

<强>更新我在上面的评论中注意到你打算在iPhone中使用它，在这种情况下看一下iScroll 4它确实有隐藏hScrollbar和vScrollbar的设置

如何在不显示滚动条的情况下从左，右，上，下滚动div？

1 个答案: