要素へのジャンプの仕方。

Lineのようなメッセージアプリで、新しいメッセージが来た場合画面が自動的に新しい要素にジャンプする実装がありますが、にせようと試行錯誤しています。

        var m=document.createTextNode("テキスト");
        var elm=document.getElementById("Appendarea");
        var p =document.createElement("p");
            p.appendChild(m);
            elm.appendChild(p);
            p.focus();

要素の取得と追加は何も問題ありませんがジャンプはしてくれません。ちなみにHTMLは以下です。

<html>

<body>
<ons-page> 
<div id ="Appendarea"  style="max-width:400px; margin:10% auto;">
</div>
</ons-page> 
</body>

</html>

アドバイスをお願いいたします。

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

回答2件

自己解決

以下でいけました。これなら<ons-page>内の状態にかかわらず実装可能です。

<input id="hideinput" type="text" disaply:none">

        document.getElementById('hideinput').style.display = 'inline';
        document.getElementById('hideinput').focus();
        document.getElementById('hideinput').style.display = 'none';

投稿2017/05/30 01:26

seri

総合スコア422

指定の要素への移動についてはanimateを利用してscrollTopを指定すると良いと思います。
たった1行！jQueryで指定箇所までアニメーションつきで自動スクロールさせる方法

focus()はあくまでカーソルを当ててくれるだけなので移動してくれるとは限りません。

ただ指定要素までの移動をするための発火条件である

新しいメッセージが来た

この部分の実装の方が難しいと思います。
どのように実装しようとお考えでしょうか？
おそらくサーバーサイドの言語（PHP）とデータベースによる機能の実装が不可欠と思います。

投稿2017/05/29 23:22

編集2017/05/30 00:03

m.ts10806

総合スコア80850

seri

2017/05/30 00:27 編集

実は添付していただいたサイトはすでに見ておりまして、実装してみたのですがこちらが上手くいかずにfocusに乗り換えた・・・といった状況ですサーバーからメッセージが送られた際にサーバーから文字を取得し、それを引き金に要素をappendする関数を呼び出しています。ですので、callback処理等はクライアントでは必要なく、要素が追加される時のみの処理実装となります。

m.ts10806

2017/05/30 00:35

んー少し厳しいことを言うかもしれませんが、「うまくいかずに乗り換えた」は少し安易かなと思います。「要素へのジャンプ（提案した方法ではスクロール）は実現したけど思ったような動きではなかったから別の方法を模索した」とかなら分かりますが・・・。いずれにせよ、「サーバーからメッセージが送られた際にサーバーから文字を取得し、それを引き金に要素をappendする関数を呼び出し」部分のコードもあわせてご提示いただいたほうが良いですね。発火のタイミングが違うとか不足しているコードがあるとかかもしれませんしね。

m.ts10806

2017/05/30 00:39

そういえば「<div id ="Appendarea" style="max-width:400px; margin:10% auto;">」の閉じ「</div>」がないのは転記ミスでしょうか？#Appendarea内にメッセージを追加していく仕様なのでしょうから閉じタグがないと思わぬバグを生みかねません。

seri

2017/05/30 01:03

おそらくはOnsenUiとの連携やページの移動もあり指定ページのhtmlやbody要素を使うと話が複雑になってしまうため諦めました。他の方法に一発で指定idの箇所に飛ぶような関数があればいいなと思ったのですが。。

seri

2017/05/30 01:05

</div>は記載ミスです、実装コードには付いていました。

m.ts10806

2017/05/30 01:09 編集

htmlやbodyだけじゃなく動的にとか固定の要素があるならそこを基点にスクロールをとは思いましたが、なるほど。やはり環境との兼ね合いも含めた回答が必要かと思いますので、質問のタグですとか本文になるべく詳しく追記された方がいいですね。早とちりの回答になってしまったようで、すみません。

seri

2017/05/30 01:12

回答ありがとうございました