スクロール可能な div が必要ですが、スクロールバーはデフォルトでブラウザーの右側にある必要があります (ただし、div の右側にはありません)。私はFacebookでそれを見てきました（ceter div - contentAreaは右側のブラウザスクロールバーによってスクロールされます）。
27096 次
4 に答える
12
Facebook のやり方は、スクロールしないすべてのコンテンツに of を持たせることpositionですfixed。このようにして、ネイティブ ブラウザーのスクロールバーは中央の領域のみをスクロールするように見えますが、実際にはページの残りの部分は固定されています。
これの非常に簡単な例:
上記を想像してみてください#header。
編集
次に示すのは、3 つの列を持つもう少し複雑な例です。
于 2011-07-01T09:15:59.087 に答える
2
実際、divあなたが話しているのはスクロール可能ではなく、他のdiv要素は固定されています
これにより、スクロールバーが div の外にある印象が得られますが、実際にページ全体をスクロールしている間、左右の div 要素は固定されています。すなわち: スタイルを使用してposition: fixed;
于 2011-07-01T09:15:28.237 に答える
1
これが大いに役立つことを願っています...ここから何ができるかを見てください、私は可能な限りコードにコメントしようとしました...
<html>
<head>
<title>Example</title>
<style>
#head{
position:fixed; /* this will make the div stay in the same place */
width:100%; /* this will size the dive to the width of the window */
height: 42px; /* this will make the height of the div 42px */
top:0px; /* make sure the div is at the very top */
left:0px; /* make sure the div is as far left as possible */
background: #009933; /* this will make the background of the div into a green color */
}#head_slack{ /* we make this one the same size so no text is ever covered */
width:100%; /* make sure the width of the slack is 100% */
height: 42px; /* make sure the hight of the slack is the same as the head fixed */
}body{
margin: 0px; /* takes out the default white border around the page */
}#leftFixed{
width 150px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
left: 0px; /* make sure the div is at the left */
top: 45px; /* make sure the div is below the head div */
}#rightFixed{
width 200px; /* set the width the same as the with of the table data cell containing the div */
position: fixed; /* make sure it stays in place */
right: 0px; /* make sure the div is at the right */
top: 45px; /* make sure the div is below the head div */
}
</style>
</head>
<body>
<div id="head">This is the fixed header</div>
<div id="head_slack">this is the header that takes the slack</div>
<table width="100%">
<tr>
<td width="150px" valign="top">
<div id="leftFixed">This is fixed content on the left</div>
</td>
<td>
This is the scrollable content
</td>
<td width="200px" valign="top">
<div id="rightFixed">this is fixed content on the right</div>
</td>
</tr>
</table>
</body>
</html>
于 2011-12-01T01:14:34.663 に答える
0
私が見つけた簡単な方法は次のとおりです。
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
何らかの理由で、div の外にスクロール バーが表示されます。
于 2015-04-12T00:12:25.730 に答える