http://jsbin.com/exUmaFU/1/edit
多くのアプリの中でも Windows 8 が大好きで、お気に入りの 1 つが天気アプリです。今日は、下のスクリーンショットの天気アプリで見られるような「横のページ コンテンツ」を作成してみました。
私はDIVを使ってこれをやろうとしていましたが、うまくいきませんでした。さまざまな方法を試しましたが、パーセントを使用して試みたものはすべてうまくいきませんでした。テーブルで em を使用するように戻し、必要な効果が得られましたが、現在、問題は div がページ幅の少なくとも 90% の幅を持つようにすることです。
この効果をどのように達成できるかについて、どんな助けも大歓迎です。
簡略化されたコード:
<!DOCTYPE html>
<html>
<head>
<title>Win 8 Horizontal Content Experiment</title>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type="text/css">
body {
background: #000;
}
#contain {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: scroll;
}
#contain table {
height: 100%;
}
#contain td {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
margin: 0px;
}
/* Separate DIVS Inside Container */
#contain .box {
display: inline-block;
width: 80em;
height: 100%;
background: red;
color: #700;
}
</style>
</head>
<body>
<div id="contain">
<table>
<tr>
<td>
<div class="box">
<center><h1>Page 1</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 2</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 3</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 4</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 5</h1></center>
</div>
</td>
<td>
<div class="box">
<center><h1>Page 6</h1></center>
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
(function() {
function scrollMenu(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
e.preventDefault();
}
if (document.getElementById('contain').addEventListener) {
// IE9, Chrome, Safari, Opera
document.getElementById('contain').addEventListener("mousewheel", scrollMenu, false);
// Firefox
document.getElementById('contain').addEventListener("DOMMouseScroll", scrollMenu, false);
} else {
// IE 6/7/8
document.getElementById('contain').attachEvent("onmousewheel", scrollMenu);
}
})();
</script>
</body>
</html>
