时间戳

首页 > 解决方案 > 如何在不看到滚动条的情况下使网站可滚动？

html - 如何在不看到滚动条的情况下使网站可滚动？

问题描述

我想删除浏览器的滚动条并且仍然可以滚动。

我试过：在子div
overflow: hidden;中的父div中
overflow-y: auto;

我希望它能够像往常一样隐藏滚动条和滚动，但它删除了浏览器滚动条并自己添加了一个，这不会让我移动。

body {
  background-image: url("image");
  background-attachment: scroll;
  overflow: hidden;
}


/*other css is inline at the top 2 divs*/
<div style="overflow: hidden">
  <div style="overflow-y: scroll; padding-right: 10px">

    <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p>
    <a href="#" style="padding-left: 30px">
      <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px;" class="menuTemplate">
        <div>
          <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px" ::after>
        </div>
        <div class="menuTextBox">VEG TREAT BURGER</div>
        <div class="menuInfo">
          <div><span class="menuInfo-inner">Price:</span></div>
          <div><span class="menuInfo-inner">45₹&lt;/span></div>
        </div>
      </div>
    </a>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p>
    <a href="#" style="padding-left: 30px">
      <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px; margin-bottom: 30px;" class="menuTemplate">
        <div>
          <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px" ::after>
        </div>
        <div class="menuTextBox">VEG TREAT BURGER</div>
        <div class="menuInfo">
          <div><span class="menuInfo-inner">Price:</span></div>
          <div><span class="menuInfo-inners">45₹&lt;/span></div>
        </div>
      </div>
    </a>
  </div>
</div>

body {
  background-image: url("https://image.freepik.com/free-photo/close-up-burger-with-black-background_23-2148234990.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: black;
  overflow: hidden;
}


/*other overflows are inline at the top
<div style="overflow: hidden">
  <div style="overflow-y: scroll; padding-right: 10px">

    <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p>
    <a href="#" style="padding-left: 30px">
      <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px;" class="menuTemplate">
        <div>
          <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px" ::after>
        </div>
        <div class="menuTextBox">VEG TREAT BURGER</div>
        <div class="menuInfo">
          <div><span class="menuInfo-inner">Price:</span></div>
          <div><span class="menuInfo-inner">45₹&lt;/span></div>
        </div>
      </div>
    </a>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <p style="font-weight: 800; font-size: 60px; font-family:sans-serif; text-align: center; color: #ff4e00; margin-bottom: 15px; border-bottom: 3px solid #ff4e00;">Burgers</p>
    <a href="#" style="padding-left: 30px">
      <div style="position:absolute; border: solid black auto; background: white; border-radius: 10px; margin-left: 30px; margin-bottom: 30px;" class="menuTemplate">
        <div>
          <img src="https://www.seriouseats.com/recipes/images/2015/07/20150702-sous-vide-hamburger-anova-primary-1500x1125.jpg" height="250px" width="335" style="padding: 10px" ::after>
        </div>
        <div class="menuTextBox">VEG TREAT BURGER</div>
        <div class="menuInfo">
          <div><span class="menuInfo-inner">Price:</span></div>
          <div><span class="menuInfo-inners">45₹&lt;/span></div>
        </div>
      </div>
    </a>
  </div>
</div>

标签： htmlcss

解决方案

要隐藏滚动条，请使用 -webkit-，因为主流浏览器（Google Chrome、Safari 或更新版本的 Opera）都支持它。下面列出的其他浏览器还有许多其他选项：

--webkit-（Chrome、Safari、较新版本的 Opera）：-- .element::-webkit-scrollbar { width: 0 !important } moz-（Firefox）：-- .element { overflow: -moz-scrollbars-none; } ms-（Internet Explorer +10）： .element { -ms-overflow-style: none; }

推荐阅读