teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

10

しゅううせい

2019/05/29 08:06

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,7 @@
8
8
  そのscrollHeightはどうやっても0です。
9
9
 
10
10
  ちなみに一度modalで表示された後、
11
- ントロールで同じようにscrollHeightを取得すると
11
+ のボタクリックイベントで同じようにscrollHeightを取得すると
12
12
  ちゃんと取れています。
13
13
 
14
14
 

9

ttt

2019/05/29 08:06

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,14 @@
4
4
  動的追加したコントロールのscrollHeightはどのようにしてて取ればいいのでしょうか?
5
5
 
6
6
  ちなみにdomは取れています。
7
+ 動的追加したmodal内のテキストのdomは取得できているけれど、
8
+ そのscrollHeightはどうやっても0です。
7
9
 
10
+ ちなみに一度modalで表示された後、
11
+ 他コントロールで同じようにscrollHeightを取得すると
12
+ ちゃんと取れています。
13
+
14
+
8
15
  ======================================================
9
16
 
10
17
  modalウインドウを表示する際、

8

修正

2019/05/29 08:05

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,8 @@
3
3
  ajaxで動的追加したコントロールのscrollHeightが取れないことが原因だと思います。
4
4
  動的追加したコントロールのscrollHeightはどのようにしてて取ればいいのでしょうか?
5
5
 
6
+ ちなみにdomは取れています。
7
+
6
8
  ======================================================
7
9
 
8
10
  modalウインドウを表示する際、

7

修正「

2019/05/29 08:04

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,7 @@
3
3
  ajaxで動的追加したコントロールのscrollHeightが取れないことが原因だと思います。
4
4
  動的追加したコントロールのscrollHeightはどのようにしてて取ればいいのでしょうか?
5
5
 
6
+ ======================================================
6
7
 
7
8
  modalウインドウを表示する際、
8
9
  modalウインドウ上のテキスト(スクロールバー付き)

6

修正

2019/05/29 08:01

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
File without changes

5

修正

2019/05/29 08:01

投稿

ms5025
ms5025

スコア292

title CHANGED
@@ -1,1 +1,1 @@
1
- modalウイドウ内のスクロール付きのテキスを、常にスクロールを下にして表示した
1
+ 動的追加したコントロールのscrollHeightが取れな
body CHANGED
@@ -1,3 +1,9 @@
1
+ 質問と表題変更しました。
2
+ 下でいろいろ書いていますが、結局のところ
3
+ ajaxで動的追加したコントロールのscrollHeightが取れないことが原因だと思います。
4
+ 動的追加したコントロールのscrollHeightはどのようにしてて取ればいいのでしょうか?
5
+
6
+
1
7
  modalウインドウを表示する際、
2
8
  modalウインドウ上のテキスト(スクロールバー付き)
3
9
  のスクロールバーを一番下にしておきたいです。

4

修正

2019/05/29 08:00

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -48,11 +48,12 @@
48
48
 
49
49
  $body.append(html);
50
50
 
51
+   // ajaxで取得したhtmlのmodalエリア
51
52
  $("#hogehogemodal").modal();
52
53
 
53
54
  // 最新のメッセージまでスクロール
54
55
  $('#スクロール付きテキスト').scrollTop(
55
- $('#スクロール付きテキスト')[0].scrollHeight - psconsole.height()
56
+ $('#スクロール付きテキスト')[0].scrollHeight - $('#スクロール付きテキスト').height()
56
57
  );
57
58
 
58
59
 

3

修正

2019/05/29 07:29

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  modalウインドウを表示する際、
2
- modalそのウインドウ上のテキスト(スクロールバー付き)
2
+ modalウインドウ上のテキスト(スクロールバー付き)
3
3
  のスクロールバーを一番下にしておきたいです。
4
4
 
5
5
  どのように実現すればよいでしょうか?

2

修正

2019/05/29 07:03

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -23,7 +23,7 @@
23
23
  // 引数
24
24
  var postData = {};
25
25
 
26
- // シェアバイトメッセージデータh崇徳
26
+ // ajax
27
27
  $.ajax({
28
28
  type: "POST",
29
29
  url: "/hogehoge/hagehage",

1

修正

2019/05/29 07:02

投稿

ms5025
ms5025

スコア292

title CHANGED
File without changes
body CHANGED
@@ -2,4 +2,60 @@
2
2
  modalそのウインドウ上のテキスト(スクロールバー付き)
3
3
  のスクロールバーを一番下にしておきたいです。
4
4
 
5
- どのように実現すればよいでしょうか?
5
+ どのように実現すればよいでしょうか?
6
+ modalは、画面表示時にその時のデータでajaxで自動生成させています。
7
+ 生成後にスクロールさせているつもりですが、実現しません。
8
+
9
+ readyタイミングではなく、modal生成後にmodal内ボタンで
10
+ 同じ処理をすれば高さは取れます。
11
+
12
+
13
+ ```ここに言語を入力
14
+
15
+
16
+ $(document).ready(function () {
17
+ setmodal();
18
+ });
19
+
20
+ // メッセージポップアップ
21
+ function setmodal(job, messageid) {
22
+
23
+ // 引数
24
+ var postData = {};
25
+
26
+ // シェアバイトメッセージデータh崇徳
27
+ $.ajax({
28
+ type: "POST",
29
+ url: "/hogehoge/hagehage",
30
+ data: postData,
31
+ dataType: 'html',
32
+ }).done(function(html) {
33
+
34
+ // ajaxで生成したmodalのtplを本体へ埋め込む
35
+ showData(html);
36
+
37
+ }).fail(function() {
38
+ alert("エラー");
39
+ });
40
+ }
41
+
42
+ function showData(html) {
43
+
44
+ // 本体のtplのmodalを埋め込みたい箇所
45
+ var $body = $("#hoge");
46
+
47
+ $body.empty();
48
+
49
+ $body.append(html);
50
+
51
+ $("#hogehogemodal").modal();
52
+
53
+ // 最新のメッセージまでスクロール
54
+ $('#スクロール付きテキスト').scrollTop(
55
+ $('#スクロール付きテキスト')[0].scrollHeight - psconsole.height()
56
+ );
57
+
58
+
59
+ }
60
+
61
+ ```