ウェブサイトの上部に小さなスライド バーを作成しています。これは、IOS 5 以降の通知センターのスライダーに似ているはずです。
HTML
<div id='orange'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla est velit, interdum consequat ante non, consectetur semper tortor. Aliquam convallis libero erat, a porttitor libero pretium ut. Phasellus convallis egestas tortor et fermentum. Nullam dignissim consectetur risus, in rhoncus urna venenatis eu. Donec non urna quis augue sollicitudin ornare. Aenean non faucibus nisi. Vestibulum porta quam quis massa tempus luctus. Quisque nisl nibh, feugiat id ante sed, auctor rhoncus est. Sed blandit enim sapien, in condimentum urna tristique vitae. Phasellus aliquam ipsum mattis fringilla vehicula. Mauris nec felis est. Nulla ullamcorper tellus a magna volutpat aliquet. Nunc nec venenatis sem.
<div class='resize' onmousedown="verticalResize(document.getElementById('orange'), 6);"></div>
</div>
CSS
#orange {
overflow:hidden;
background-color: #ca4d0d;
height: 6px;
position: relative;
}
.resize {
padding:0;
height: 6px;
width: 40px;
cursor: n-resize;
position: absolute;
background-color: #000;
bottom:0;
left: 50%;
margin: 0 0 0 -20px;
}
ジャバスクリプト
function verticalResize(element, min) {
event = event || window.event;
var mouseToBottom = (element.offsetTop + element.offsetHeight) - event.clientY;
document.onmousemove = function (event) {
var target = (event.clientY + mouseToBottom) - element.offsetTop;
if (target < min || element.offsetHeight < min) {
element.style.height = min + "px";
} else if (target > element.scrollHeight || element.offsetHeight > element.scrollHeight) {
element.style.height = element.scrollHeight + "px";
} else {
element.style.height = target + "px";
}
}
document.onmouseup = function () {
document.onmousemove = null;
if (element.releaseCapture) {
element.releaseCapture();
}
}
if (element.setCapture) {
element.setCapture();
}
}
問題は、思いどおりに動作するようになったことです(完璧になるまで、クロムで作成したものをすべてテストしています)。次に、主要なブラウザー (IE、Opera、Safari、Chrome、および Firefox) でテストしたところ、Firefox を除いて正常に動作しました。Firefox ではマウス イベントが登録されないようです。
どうしてこれなの?そして、どうすれば解決できますか?