Question

我创建了一个左侧菜单，该菜单在鼠标输入时展开。可行，但是我有一个小问题：有没有办法/如何停止水平滚动条在左面板底部显示？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
  #leftpanel {
    left: 0;
    width: 100px;
    overflow: auto;
    height: 100%;
    background: gray;
    border: 2px solid black;
    position: fixed;
    z-index:100;
  }
  #centerPanel {
    top: 0px;
    position: relative;
    left: 100px;
    height: 600px;
    width:calc(100% - 100px);
    background: yellow
  }
</style>

<script>
$(function() {
//  alert("ready");
  $("#leftpanel").mouseenter(function() {
    var rect = document.getElementById("tbl").getBoundingClientRect();
    var wid = (rect.left + rect.width);
    var css = {};
    css.width = wid;
    $(this).animate(css, "slow");
  });
  $("#leftpanel").mouseleave(function() {
    $(this).animate({width: "100px"}, "slow");
  });
});
</script>

</head>
<body>
<div id="leftpanel"><table id="tbl"><tr><td style="white-space: nowrap">This is some longerish text using this as an example</td></tr></table></div>
<div id="centerPanel"><a href="">Foo</a></div>
</body>
</html>

Answer 1

在#leftpanel中，将溢出设为隐藏，而不是自动

#leftpanel {
  left: 0;
  width: 100px;
  overflow: hidden;
  height: 100%;
  background: gray;
  border: 2px solid black;
  position: fixed;
  z-index:100;
}

访问https://jsfiddle.net/w7652rzx/

Answer 2

简短答案：

更改

overflow: auto;

到

overflow: hidden;

来自the Docs：

自动：
  如果内容溢出，桌面浏览器会提供滚动条。

隐藏：
  如有必要，内容会被裁剪以适合填充框。没有提供滚动条。

Answer 3

在左面板样式中需要使用overflow：hidden。在使用自动之前。

这意味着您的文本很长，因此会自动在底部添加滚动。使用以下代码，

#leftpanel {
    left: 0;
    width: 100px;
    overflow: hidden;
    height: 100%;
    background: gray;
    border: 2px solid black;
    position: fixed;
    z-index:100;
  }

如何防止水平滚动条显示在浮动div上？

3 个答案: