HTML/JavaScriptでLINE風にスクロールさせる方法

ヘッダ・コンテンツ・フッタの構成でヘッダとフッタを固定幅としてコンテンツエリアを可変とする構成にしようとしています。
LINEのようにフッタにメッセージ入力エリアを設けて入力した内容をコンテンツエリアに反映させようとしていますが上手くいきません。

↓こんな画面です。

困っているのは、

・div要素に追加したメッセージの要素が最初一番上に来て欲しいが、何故かヘッダーから余白が空いて追加される。
・コンテンツエリアにメッセージを追加するとスクロールバーが表示されるようにしたが、スクロールバーが何故かコンテンツエリアの領域からはみ出てしまう。
・スクロールバーが出た状態でメッセージを入力するとメッセージの最下部までスクロール表示して欲しい。

この3点です。Webで調査してていますがなかなか思った情報に行き当たらずこちらで質問させて頂きました。
またデザイナーでない為、CSSにあまり明るくない為、お作法的に良くない箇所等ございましたらご指摘頂けると助かります。

HTMLとCSSは以下のように実装しています。

■HTML(chat.html)

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<link rel="stylesheet" href="./css/chat.css" type="text/css">
6<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
7<script type="text/javascript" src="./js/desktop-notify-min.js"></script>
8<script type="text/javascript">
9	var countMax = 1000;
10	var toUser = 1;
11	var toUserName = "テスト";
12
13	$(function(){
14		// Enterで送信する処理
15		$(document).on("keypress", "#message", function(e) {
16			var msg = $('#message').val();
17			if (e.keyCode == 13) { // Enterが押された
18				if (e.shiftKey) { // Shiftキーも押された
19					$.noop();
20				} else if (msg.replace(/\s/g, "").length > 0) {
21						e.preventDefault();
22						var messageElement = $('<div class="sendbox">' + msg + '</div>');
23					  $("#contactInnerArea").append(messageElement);
24						//var scrollPos = $('#contactArea').scrollTop();
25						//alert("scrollTop : " + scrollPos);
26						if (scrollPos != 0) {
27							 $('#contactArea').scrollTop(scrollPos);
28						}
29						$('#message').val('');
30			    }
31			} else {
32			  $.noop();
33			}
34		});
35	});
36	</script>
37</head>
38
39<body>
40	<div id="chatArea">
41		<div id="headerArea">
42      <div id="headerMain">
43        <div class="inner">安倍ちゃん</div>
44      </div>
45    </div>
46    <div id="contactArea">
47      <div id="contactInnerArea"></div>
48    </div>
49		<div id="messageArea">
50			<div id="inputArea">
51				<textarea cols="30" rows="4" id="message"></textarea>
52			</div>
53			<div id="numberArea">
54				<p><span id="counter"></span></p>
55			</div>
56		</div>
57	</div>
58</body>
59</html>
60

■CSS(chat.css)

CSS
1body *{
2  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
3}
4html,body{
5	background-color: #fff;
6	color: #333;
7	overflow: hidden;
8	height: 100%;
9}
10
11div.sendbox {
12	font-size:10px;
13	background:#00ff00;
14	margin:2px;
15	margin-left:10px;
16	padding:2px;
17	border-radius: 3px;
18}
19div.receivebox {
20	font-size:10px;
21	background:#c0c0c0;
22	margin:2px;
23	margin-right:10px;
24	padding:2px;
25	border-radius: 3px;
26}
27
28#chatArea {
29	border: solid 1px;
30	margin: 0 auto;
31	position: relative;
32	width: 100%;
33	height: 100%;
34}
35
36#headerArea {
37	background-color: #808080;
38  height:25px;
39	position: absolute;
40	top: 0;
41	left: 0;
42	width: 100%;
43  font-weight: bold;
44  text-align:center;
45
46}
47
48#contactArea {
49	overflow: auto;
50	top:100px
51	position: absolute;
52	z-index: 1;
53	width: 100%;
54	height: 100%;
55	background:#ffebcd;
56}
57
58#contactInnerArea{
59	padding: 105px 0 50px;
60}
61
62#messageArea {
63	background-color: #ccc;
64	position: absolute;
65	bottom: 0;
66	left: 0;
67	width: 100%;
68	height: 100px;
69}
70
71div#inputArea {
72	font-size:10px;
73}
74div#numberArea {
75	font-size:8px;
76}
77

追記です。

・div要素に追加したメッセージの要素が最初一番上に来て欲しいが、何故かヘッダーから余白が空いて追加される。

こちらは、単純にCSSのpaddingを取り過ぎていただけでした。

CSS
1#contactInnerArea{
2    padding: 25px 0 50px;
3}
4

と変更し解消されました。失礼いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

コンテンツエリアにメッセージを追加するとスクロールバーが表示されるようにしたが、スクロールバーが何故かコンテンツエリアの領域からはみ出てしまう。

CSSを以下のように変更。

CSS
1#contactArea {
2    width: 100%;
3    height: calc(100% - 125px);
4    background:#ffebcd;
5    overflow: auto;
6    margin-top:25px;
7}
8#contactInnerArea{
9}

calcのブラウザ対応が気になるならマイナスマージンを使えばそれっぽくなるかもしれません。

CSS
1#contactArea {
2    width: 100%;
3    height: 100%;
4    background:#ffebcd;
5    overflow: auto;
6    margin-top:-125px;
7}
8#contactInnerArea{
9    padding-top:125px;
10}

スクロールバーが出た状態でメッセージを入力するとメッセージの最下部までスクロール表示して欲しい。

メッセージ挿入後の処理をこんな感じに。

javascript
1var scrollPos = $('#contactArea').scrollTop();
2if (scrollPos != 0) {
3     $('#contactArea').scrollTop($('#contactInnerArea').height());
4}

参考になれば幸いです。

投稿2015/09/16 09:25

編集2015/09/16 09:28

Lhankor_Mhy

総合スコア36087

rice

2015/09/17 03:06

Lhankor_Mhyさんありがとうございます！！calcでヘッダとフッタ分の高さを100%の高さから除いてやる方法があるんですね。初めて知りました。 calc対応ブラウザでの利用なので対応ブラウザは問題なさそうです。 JavaScriptの自動スクロールですが、何故かスクロールが効いてくれない時があります。(Firefox/Chromeで試しました) 規則性がまだわかってないですがスクロールバーが出ているのにscrollTop()が0を返してきます。

Lhankor_Mhy

2015/09/17 05:33

http://api.jquery.com/scrollTop/ > Get the current vertical position of the scroll bar 　とありますので、スクロールバーが出ていても一番上にあれば0が返ってきます。すみません、てっきりあのif文を読んで、「スクロールバーが1番上部にある時は新規投稿位置まで下げない」という仕様なのかと思ってました。if文を外せば普通に動くと思います。

rice

2015/09/17 09:43

期待した通りの動きになりました！scrollTopの仕様を誤解していました。スクロールからはみ出た箇所の高さを返す物かと思っていましたがスクロールバーの位置を返すんですね。ご回答ありがとうございした！

行動規範の内容に同意します