禁用垂直滚动

Posted

技术标签:

【中文标题】禁用垂直滚动【英文标题】：Disable vertical scroll 【发布时间】：2019-03-07 08:49:27 【问题描述】：

在问之前我已经看到了关于同一主题的这些问题，但没有找到解决方案：

我看到的问题

    Question Question Question

期望的行为

当我点击菜单按钮时，我必须停止垂直滚动（或者地图内容会越过菜单，正如您在笔中看到的那样）

问题

我不明白如何在菜单打开时停止垂直滚动。

代码

这是关于菜单的 CSS 

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

* 
  box-sizing:border-box;


html
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
  font-family: 'Playfair Display', serif;


body
  position:relative;
  height:100%;
  width:100%;
  margin: 0;
  padding: 0;

.content 
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;


.circle 
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 95px;
    border-bottom-right-radius: 100%;
    background-color: #22253C;



.title 
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 400;
    padding: 0 15px;


.btn
  position:absolute;
  top:20px;
  left:20px;
  background-color:transparent;
  border:0;
  padding:0px;
  z-index:1;
  cursor:pointer;


.btn__line
  height:2px;
  width:32px;
  display:block;
  background-color: white;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  position: relative;


.btn__line:nth-child(1)
  left:-4px;

.btn__line:nth-child(2)
  left:4px;

.btn__line:nth-child(3)
  left:-4px;



.btn__line + .btn__line
  margin-top:6px;


.btn:hover .btn__line, .btn--open .btn__line
  left:0px;


.btn--open .btn__line
  background-color:#fff;


.nav__list 
    list-style: none;
    margin: 0;
    padding: 0;
    visibilty: hidden;
    transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    opacity: 0;
    display: flex;
    flex-direction: row;
    -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);


.nav__item--hover
  opacity: 0.25;


.nav__item
    position:sticky;


.full-menu 
  position: fixed;
  top:0;
    width: 100%;
  height:0;
    display: flex;
    justify-content: center;
    align-items: center;
   transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;


.full-menu:before, .full-menu:after
  content: '';
  height: 0;
   position: fixed;
  top:0;
    width: 100%;
    height: 0;


.full-menu:before
  z-index: -10;
  background-color:#B9C6EE;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
 

.full-menu:after
   z-index: -1;
  background-color:#22253C;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;




.menu--open:before, .menu--open:after
  height: 100%;


.menu--open:before
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
 

.menu--open:after
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;


.menu--open
  height:100%;
  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;


.nav__item 
    padding: 0 20px;
  visibility: hidden;
    transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;


.menu--open .nav__item
  visibility: visible;


.menu--open .nav__list
  visibilty: visible;
  opacity: 1;
  -webkit-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;


.nav__link 
    text-decoration: none;
    color: #fff;
    font-size: 30px;
     letter-spacing: 1px;


.nav__item:hover 
    transform: scale(1.1, 1.1);


.nav__item:hover .nav__link
  font-weight:700;


.nav__item-not-hover
  opacity:0.3;


@media screen and (max-width:767px)
  .nav__list
    flex-direction:column;
    text-align:center;
  
  .nav__item
    padding:8px 0;
  



@media screen and (max-width:480px)
  .nav__link
    font-size:26px;

下面有 html 

<html>
  <head>
    <title>Restosearch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <!-- Menu down below -->
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu" style=" overflow-x: hidden">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- Menu up above -->
    <main>
        <div class="container">
            <div class="box">
                <div>
                    <h2 style="">Search the closest restaurant</h2>
                </div>
            </div> 
        </div>
        <div class="downBox">
                    <input id="pac-input" class="controls" type="text" placeholder="insert here: YourNation, YourCity, YourStreet">
        </div>

        <div class="parent">  
          <div class="left">
              <section class="flex-container">
                  <div class="flex-item">
                      <div id="photo"> </div>   
                      <div id="title"> </div>
                  </div>
                  <div class="flex-item">
                      <div id="photo"> </div>   
                      <div id="title"> </div>
                  </div>
              </section>
          </div>
          <div class="right">
              <div id="map">
              </div>
          </div>
        </div>

    </main>  
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="script.js"> </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&libraries=places&callback=initAutocomplete"
         async defer></script>
</html>

Codepen

codePen Here

【问题讨论】：

【参考方案1】：

当用户单击菜单按钮时，您可以设置溢出：隐藏到您的正文元素。它会阻止页面滚动。

CSS：

body.disable-scroll 
  overflow: hidden;

JS：

burger.click(function()
   $("body").toggleClass("disable-scroll");
);

【讨论】：

完美，感谢您的回答，您解决了问题！非常感谢您的解决方案。 您应该知道隐藏在您的正文中的设置溢出会导致您的页面滚动到顶部。 所以每次我点击菜单时，页面都会返回顶部。不，我不知道...只是为了了解我是否有办法解决这个问题：我可以将以前的滚动存储在一个变量中（使用 js），当我关闭菜单时，我可以重新使用这个变量在前一点返回。 您也可以永久禁用您的身体滚动，并使您的
元素可滚动。我相信它可以完美地解决您的问题。
 1- 添加溢出：隐藏；到你的身体。 2-添加高度：100%；和溢出：自动；到你的
元素。这些更改会导致一些布局问题，但我相信您可以轻松解决。
【参考方案2】：

您不需要禁用滚动。您可以使用 z-index css 属性。如果您向菜单容器 div 添加样式为z-index: 10 并且您的 div 的 id 为映射 z-index: 5，这会将映射放置在菜单后面。

将其视为 3D 索引，索引越低，应用到元素的层越低，索引越高，层次结构中的层越高。

更多：https://www.w3schools.com/cs-s-ref/pr_pos_z-index.asp

您也可以使用 JS 仅在菜单打开时禁用滚动，但如果您只想解决地图问题，最简单的方法是使用 z-index。

【讨论】：

非常感谢您的友好回答。正如您在我的代码中看到的那样，我已经使用了它（我只是更新了笔，我会在写完此评论后执行此操作）问题是打开菜单时滚动它是无用的，而且很难看恕我直言。

以上是关于禁用垂直滚动的主要内容，如果未能解决你的问题，请参考以下文章

滚动时禁用 UITableView 垂直反弹

以编程方式禁用 UICollectionView 中的垂直滚动

如何在 UIScrollView 中仅禁用垂直滚动？

如何禁用垂直滚动 UIScrollView？

Bootstrap：如何禁用垂直滚动条？

IOS CorePlot禁用垂直滚动