teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問javascript スクロール 下からの位置を取得する方法

編集履歴

質問編集履歴

4

2019/08/25 07:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -110,8 +110,6 @@
110
110
 
111
111
 
112
112
 
113
-
114
-
115
113
  　　　　//＊＊＊＊↓質問はこのポイントです。＊＊＊＊
116
114
 
117
115
  if ((scrollHeight - scrollPosition) / scrollHeight <= 0) {

3

2019/08/25 07:26

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- **//スクロール検出
33
+ //スクロール検出
34
34
 
35
35
  // スクロールさせる要素を取得
36
36
 
@@ -64,7 +64,7 @@
64
64
 
65
65
  var proximity = 0;
66
66
 
67
- **
67
+
68
68
 
69
69
 
70
70
 
@@ -114,11 +114,11 @@
114
114
 
115
115
  　　　　//＊＊＊＊↓質問はこのポイントです。＊＊＊＊
116
116
 
117
- ** if ((scrollHeight - scrollPosition) / scrollHeight <= 0) {
117
+ if ((scrollHeight - scrollPosition) / scrollHeight <= 0) {
118
118
 
119
119
  処理
120
120
 
121
- };**
121
+ };
122
122
 
123
123
  });
124
124
 

2

修正しました

2019/08/25 07:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -23,8 +23,6 @@
23
23
  function buildMESSAGE(message) {
24
24
 
25
25
  var messages = $('#log').append('<div class="messages" data-id=' + message.id + '><p>' + message.content + '</p></div>');
26
-
27
- //'tbody'に'tr'以下のhtml全てをappendする
28
26
 
29
27
  }
30
28
 
@@ -74,41 +72,39 @@
74
72
 
75
73
  setInterval(update, 10000);
76
74
 
77
- //10000ミリ秒ごとにupdateという関数を実行する
78
-
79
75
  });
80
76
 
81
- function update(){ //この関数では以下のことを行う
77
+ function update(){
82
78
 
83
- if($('.messages')[0]){ //もし'messages'というクラスがあったら
79
+ if($('.messages')[0]){
84
80
 
85
- var message_id = $('.messages:last').data('id'); //一番最後にある'messages'というクラスの'id'というデータ属性を取得し、'message_id'という変数に代入
81
+ var message_id = $('.messages:last').data('id');
86
82
 
87
- } else { //ない場合は
83
+ } else {
88
84
 
89
- var message_id = 0 //0を代入
85
+ var message_id = 0
90
86
 
91
87
  }
92
88
 
93
- $.ajax({ //ajax通信で以下のことを行う
89
+ $.ajax({
94
90
 
95
- url: location.href, //urlは現在のページを指定
91
+ url: location.href,
96
92
 
97
- type: 'GET', //メソッドを指定
93
+ type: 'GET',
98
94
 
99
- data: { //railsに引き渡すデータは
95
+ data: {
100
96
 
101
- message: { id: message_id } //このような形(paramsの形をしています)で、'id'には'message_id'を入れる
97
+ message: { id: message_id }
102
98
 
103
99
  },
104
100
 
105
- dataType: 'json' //データはjson形式
101
+ dataType: 'json'
106
102
 
107
103
  })
108
104
 
109
- .always(function(data){ //通信したら、成功しようがしまいが受け取ったデータ（@new_message)を引数にとって以下のことを行う
105
+ .always(function(data){
110
106
 
111
- $.each(data, function(i, data){ //'data'を'data'に代入してeachで回す
107
+ $.each(data, function(i, data){
112
108
 
113
109
  buildMESSAGE(data); //buildMESSAGEを呼び出す
114
110
 

1

試したコード書きました

2019/08/25 06:52

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1 +1,155 @@
1
+ メッセージを受け取り下に追加していくアプリです（Lineのような）
2
+
3
+
4
+
5
+ ```HTML
6
+
7
+ <div id="log">
8
+
9
+ ここにメッセージが追加されます。
10
+
11
+ </div>
12
+
13
+ ```
14
+
15
+
16
+
17
+ ```javascript
18
+
19
+ //自動更新
20
+
21
+ $(function(){
22
+
23
+ function buildMESSAGE(message) {
24
+
25
+ var messages = $('#log').append('<div class="messages" data-id=' + message.id + '><p>' + message.content + '</p></div>');
26
+
27
+ //'tbody'に'tr'以下のhtml全てをappendする
28
+
29
+ }
30
+
31
+
32
+
33
+
34
+
35
+ **//スクロール検出
36
+
37
+ // スクロールさせる要素を取得
38
+
39
+ var elm = document.getElementById('log');
40
+
41
+
42
+
43
+ // 要素の表示領域を取得
44
+
45
+ var height = elm.offsetHeight;
46
+
47
+ var scrollHeight = elm.scrollHeight;
48
+
49
+
50
+
51
+ // 要素のスクロール位置を取得
52
+
53
+ var scrollTop = elm.scrollTop;
54
+
55
+
56
+
57
+ // 現在の表示位置の高さ
58
+
59
+ var scrollPosition = height + scrollTop;
60
+
61
+
62
+
63
+ // どれだけ近づいたかを判断する値
64
+
65
+ // 0に近いほど、スクロールの最終が近い
66
+
67
+ var proximity = 0;
68
+
69
+ **
70
+
71
+
72
+
73
+ $(function(){
74
+
75
+ setInterval(update, 10000);
76
+
77
+ //10000ミリ秒ごとにupdateという関数を実行する
78
+
79
+ });
80
+
81
+ function update(){ //この関数では以下のことを行う
82
+
83
+ if($('.messages')[0]){ //もし'messages'というクラスがあったら
84
+
85
+ var message_id = $('.messages:last').data('id'); //一番最後にある'messages'というクラスの'id'というデータ属性を取得し、'message_id'という変数に代入
86
+
87
+ } else { //ない場合は
88
+
89
+ var message_id = 0 //0を代入
90
+
91
+ }
92
+
93
+ $.ajax({ //ajax通信で以下のことを行う
94
+
95
+ url: location.href, //urlは現在のページを指定
96
+
97
+ type: 'GET', //メソッドを指定
98
+
99
+ data: { //railsに引き渡すデータは
100
+
101
+ message: { id: message_id } //このような形(paramsの形をしています)で、'id'には'message_id'を入れる
102
+
103
+ },
104
+
105
+ dataType: 'json' //データはjson形式
106
+
107
+ })
108
+
109
+ .always(function(data){ //通信したら、成功しようがしまいが受け取ったデータ（@new_message)を引数にとって以下のことを行う
110
+
111
+ $.each(data, function(i, data){ //'data'を'data'に代入してeachで回す
112
+
113
+ buildMESSAGE(data); //buildMESSAGEを呼び出す
114
+
115
+
116
+
117
+
118
+
119
+ 　　　　//＊＊＊＊↓質問はこのポイントです。＊＊＊＊
120
+
121
+ ** if ((scrollHeight - scrollPosition) / scrollHeight <= 0) {
122
+
123
+ 処理
124
+
125
+ };**
126
+
127
+ });
128
+
129
+ });
130
+
131
+ }
132
+
133
+ });
134
+
135
+ ```
136
+
137
+ 質問したい所は、ajaxでメッセージを受信した時の処理です。
138
+
139
+ if文分岐したいのですが、
140
+
141
+ 一番下にスクロールバーがある状態でメッセージを受け取ったら処理をする。
142
+
143
+ それ以外なら処理は行わない　としたいのですが、if文が間違っているのか、
144
+
145
+ どの位置にスクロールバーがあっても処理が行われてしまいます。
146
+
147
+
148
+
149
+ スクロールバーの位置の取得が間違っているのかと思われるのですが、
150
+
151
+ 調べ試したのですが全く同じでどの状況でも処理されてしまいました。
152
+
153
+
154
+
1
- javascriptでページの下からの位置を取得する方法を教えてください。
155
+ 正しいjavascriptでページの下からの位置を取得する方法を教えてください。