0
オーバーフローオートが定義されたdiv内に大きなテーブルがあります。それでも、私は垂直スクロールバーだけを見ることができます。水平スクロールバーはdivの一番下にあり、使用するのにはかなり不便です。ここで何が起きているのか？div内のテーブル - divの下にある水平スクロールバー
A
答えて
1
どうやってこのようにしますか？
$("#scrollbar").on("scroll", function(){
var container = $("#container");
var scrollbar = $("#scrollbar");
ScrollUpdate(container, scrollbar);
});
function ScrollUpdate(content, scrollbar){
$("#spacer").css({"width":"500px"}); // set the spacer width
scrollbar.width = content.width() + "px";
content.scrollLeft(scrollbar.scrollLeft());
}
ScrollUpdate($("#container"),$("#scrollbar"));
$("#tab").tableHeadFixer({
"left": 1,
"right": 0,
"head": true
});#container {
width: 300px;
height: 300px;
background: green;
overflow-x: hidden !important;
overflow-y: auto;
position: absolute;
left: 0px;
top: 0px;
}
#scrollbar {
position: fixed;
left: 0px;
bottom: 0px;
width: 300px;
overflow-x: scroll;
overflow-y: hidden;
z-index: 10;
}
#spacer {
height: 1px;
}
#tab {
width: 500px;
height: 500px;
background: #CCCCCC;
}
tr,td {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div id="scrollbar"><div id="spacer"></div></div>
<div id="container">
<table id="tab">
<thead>
\t \t \t \t <tr>
\t \t \t \t \t <th>Title</th>
\t \t \t \t \t <th>Name</th>
\t \t \t \t \t <th>History</th>
\t \t \t \t </tr>
\t \t \t </thead>
\t \t \t <tbody>
\t \t \t \t <tr>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t \t <td>test</td>
\t \t \t \t </tr>
\t \t \t </tbody>
</table>
</div>+0
しかし私は同じ問題があります。ユーザーはdivをスクロールダウンして水平スクロールバーを作成する必要があります。 –
+0
これは私が探していたものです。まだどこでどのようにそのjavascript関数を実装するかを調べなければなりません。しかし、今は大きな感謝のために！ –
+0
$（document）.ready（function（）{}）をすでに使用している場合は、あなたはそこに置くことができます。それ以外の場合は、
いくつかのコードは、あなたの問題を示すためにしてください。 – Icewine