[英]How can I prevent horizontal scrollbars from showing on my floating div?
我創建了一個左側菜單,可在鼠標輸入時展開。 這可行,但是我有一個小問題:有沒有辦法/如何停止水平滾動條在左面板底部顯示?
<!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>
在#leftpanel中,將溢出設為隱藏而不是自動
#leftpanel {
left: 0;
width: 100px;
overflow: hidden;
height: 100%;
background: gray;
border: 2px solid black;
position: fixed;
z-index:100;
}
簡短答案:
更改
overflow: auto;
至
overflow: hidden;
從文檔中 :
自動 :
如果內容溢出,桌面瀏覽器會提供滾動條。隱藏 :
如有必要,內容會被裁剪以適合填充框。 沒有提供滾動條。
在左面板樣式中需要使用overflow:hidden。 使用自動之前。
這意味着您的文本很長,因此會自動在底部添加滾動。 使用以下代碼,
#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.