0
サイドバーをスクロールしてアプリケーションを作成していますが、Firefoxを使用すると少し奇妙な動作をします:サイドバーのコンテンツが、サイドバーが表示され、マウスがサイドバーの最上部にあるときは正しく消えます。Firefoxの奇数スクロールバーの動作
これは世界の終わりではありませんが、私はむしろ私のアプリは、Firefoxユーザーに妙に動作しない必要があるだろう。ここで
はHTMLです:
<div id="header">
<h1>Header</h1>
</div>
<div id="fixed-body">
Test
</div>
<div id="scrollable">
<div id="menu-header">
Menu
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mauris in lacus vestibulum facilisis non at mauris.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae mauris in lacus vestibulum facilisis non at mauris.
</p>
</div>
とCSS:
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#header {
position: fixed;
left: 0;
top: 0;
height: 10%;
width: 100%;
background-color: #DDFFDD;
color: #005500;
}
h1 {
font-size: 2em;
margin: 0;
padding: 5px;
}
#fixed-body {
position: fixed;
top: 10%;
left: 0;
background-color: #AAAAFF;
width: 75%;
height: 90%;
}
#scrollable {
height: 100%;
width: 25%;
margin-left: 75%;
margin-top: 10%;
padding: 0;
overflow-y: scroll;
}
#menu-header {
width: 90%;
margin: 0 5%;
padding: 3px;
background-color: #F80;
font-size: 1.8em;
font-weight:bold;
}
p {
margin: 10px;
font-size: 1.4em;
}
そしてJSFiddleへのリンク:https://jsfiddle.net/threerightangles/os1b48ou/