如何防止水平滚动条显示在浮动div上？
[英]How can I prevent horizontal scrollbars from showing on my floating div?
问题描述
I have created a left-side menu that expands on mouse enter. 
我创建了一个左侧菜单，可在鼠标输入时展开。 This works, but I have one minor issue: Is there a way / How can I stop the horizontal scrollbar from showing at the bottom of the left panel? 这可行，但是我有一个小问题：有没有办法/如何停止水平滚动条在左面板底部显示？
<!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>
3 个解决方案
解决方案1
1 2018-09-26 17:34:26
In #leftpanel, make overflow as hidden instead of auto 在#leftpanel中，将溢出设为隐藏而不是自动
#leftpanel {
left: 0;
width: 100px;
overflow: hidden;
height: 100%;
background: gray;
border: 2px solid black;
position: fixed;
z-index:100;
}
Visit https://jsfiddle.net/w7652rzx/ 访问https://jsfiddle.net/w7652rzx/
解决方案2
1 已采纳 2018-09-26 17:35:24
Short answer: 简短答案：
change 更改
overflow: auto;
to 至
overflow: hidden;
auto :
[...] Desktop browsers provide scrollbars if content overflows.hidden :
Content is clipped if necessary to fit the padding box.
解决方案3
1 2018-09-26 17:36:06
In the left panel style need to use overflow:hidden. 在左面板样式中需要使用overflow：hidden。 Before you have used auto. 使用自动之前。
This means, your text was long so it's automatically added scroll in the bottom. 这意味着您的文本很长，因此会自动在底部添加滚动。 Use below code, 使用以下代码，
#leftpanel {
left: 0;
width: 100px;
overflow: hidden;
height: 100%;
background: gray;
border: 2px solid black;
position: fixed;
z-index:100;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.