避免使用CSS进行水平滚动以将绝对div定位在右侧

debugcn 发表于 Dev

学习与分享

我在HTML文档的右侧隐藏了一个CSS绝对位置的div，并向我显示了水平滚动，可以避免这种情况吗？

这是一个例子：

http://jsfiddle.net/milindex/3pettu8m/1/

$("#open").click(function(e) {
  e.preventDefault();
  $("#menu").toggleClass("show");
});

#menu {
  position: absolute;
  background-color: #222;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}
.right {
  right: -280px;
}
.show {
  right: 0;
}
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #FFCC33;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="open">Open Main</a>

<nav id="menu" class="menuUser right">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</nav>

迪帕斯

只需将其添加到您的代码中

html {
    overflow-x:hidden
}

这是一个片段：

$("#open").click(function(e){
	e.preventDefault();
	$("#menu").toggleClass("show");
});

html {
    overflow-x:hidden
}
#menu {
  position: absolute;
  background-color: #222;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}

.right	 { right: -280px; }

.show { right: 0; }

#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #FFCC33;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" id="open">Open Main</a>

<nav id="menu" class="menuUser right">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。