css 停止水平滚动-所有页面

vbopmzt1 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(132)

这里是我的网站：https://rustinpeace.io
在移动的视图中，我有一个导航链接有负边距。它在触摸按钮时显示。我的问题是这导致我的移动视图水平滚动。
有没有办法让导航栏保持负边距并停止水平滚动？
这是我第一次建网站

@media(max-width: 800px){
  html{
  overflow-x:auto !important;
  }
  body{
  overflow-x:auto !important;
  }

以上内容无效。

css

来源：https://stackoverflow.com/questions/75711023/stop-horizontal-scroll-all-pages

2条答案

按热度按时间

im9ewurl1#

而不是使用

@media(max-width: 800px){
  html{
  overflow-x:auto !important;
  }
  body{
  overflow-x:auto !important;
  }

只需使用溢出：隐藏

@media(max-width: 800px){
body{
  overflow:hidden;
   }
 }

这应该行得通。

赞(0）回复(0）举报 2023-03-14

ac1kyiln2#

让body上的overflow单独存在;只保留浏览器中的默认样式。
因为nav的父元素已经是100vh高了，最简单的解决方案就是简单地控制那个元素的溢出。我已经把你的代码简化成了下面的一个演示。

var navLinks = document.getElementById("navLinks")

function showMenu() {
  navLinks.style.right = "0";
}

function hideMenu() {
  navLinks.style.right = "-200px";
}

body {
  max-width: 400px;
  border: 2px solid black;
}

* {
  box-sizing: border-box;
}

.header {
  position: relative;
  min-height: 100vh;
  overflow: hidden; /* add this */
}

.nav-links {
  background-color: cadetblue;
  position: absolute;
  top: 0;
  right: -200px;
  padding: 20px;
  height: 100vh;
  width: 200px;
  z-index: 2;
  transition: 1s;
}

.nav-links a {
  color: white;
}

section:not(:first-child) {
  padding: 20px;
  min-height: 300px;
}

section:nth-child(2) {
  background-color: gold;
}

section:nth-child(3) {
  background-color: firebrick;
}

<html>
<body>
  <section class="header">
    <nav>
      <div class="nav-links" id="navLinks">
        <!-- use a real button; put your icon inside it -->
        <button onclick="hideMenu()" type="button">close</button>
        <ul>
          <li><a href="/page-1">Page 1</a></li>
          <li><a href="/page-2">Page 2</a></li>
          <li><a href="/page-3">Page 3</a></li>
          <li><a href="/page-4">Page 4</a></li>
        </ul>
      </div>
    </nav>
    <!-- use a real button; put your icon inside it -->
    <button onclick="showMenu()" type="button">open</button>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor neque velit, non tempus lacus molestie non. Vivamus urna tortor, posuere et nibh et, euismod porta leo.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor neque velit, non tempus lacus molestie non. Vivamus urna tortor, posuere et nibh et, euismod porta leo.</p>
  </section>
</body>
</html>

有一点需要注意：如果有人使用键盘在这些小屏幕上浏览你的网站，你会遇到这种导航设计的问题。一旦有人点击tab键，浏览器就会把屏幕外的链接链接到 windows 中，这会完全打乱你的JS逻辑。解决这个问题的方法是：
1.在打开/关闭图标周围使用实际的<button>元素，以便可以通过Tab键访问它们。
1.在tabindex="-1"导航栏中给予所有链接，这样键盘用户一开始只能看到打开菜单的按钮。当你点击打开按钮时，从链接中删除tabindex属性，或者将其更新为tabindex="0"。然后在关闭菜单时将其恢复为tabindex="-1"。

赞(0）回复(0）举报 2023-03-14

我来回答

css 停止水平滚动-所有页面

2条答案

相关问题

热门标签

最新问答