teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jQueryで最下部までスクロールしたときに「同意する」ボタンを活性化させたい

編集履歴

質問編集履歴

1

投稿テンプレートおよび不要な文言を削除しました。

2017/01/09 14:44

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- jQueryでのパーミッションの実装
1
+ jQueryで最下部までスクロールしたときに「同意する」ボタンを活性化させたい
test CHANGED
@@ -1,11 +1,5 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- ここに質問したいことを詳細に書いてください
4
-
5
- (例)PHP(CakePHP)で●●なシステムを作っています。
6
-
7
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
8
-
9
3
 
10
4
 
11
5
  teratailでの投稿が初めてなので至らぬところがあるかと思いますが
@@ -32,198 +26,180 @@
32
26
 
33
27
  最下部までスクロールしてもボタンが活性化しない。
34
28
 
29
+
30
+
31
+
32
+
33
+
34
+
35
+ ###該当のソースコード
36
+
37
+ ```lang-PHP
38
+
39
+ 【index.php】
40
+
41
+ <!DOCTYPE html>
42
+
43
+ <html>
44
+
45
+ <head>
46
+
47
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
48
+
49
+ <link rel="stylesheet" href="style.css" type="text/css">
50
+
51
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
52
+
53
+ <script type="text/javascript">
54
+
55
+ //$('#policy').bind('scroll', function() {
56
+
57
+ $('#policy').scroll(function() {
58
+
59
+ scrollHeight = $(this).height();
60
+
61
+ scrollPosition = $(this).height() + $(this).scrollTop();
62
+
63
+
64
+
65
+
66
+
67
+ if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
68
+
69
+ //スクロールの位置が下部5%の範囲に来た場合
70
+
71
+ $('#agree').removeAttr('disabled');
72
+
73
+ }
74
+
75
+ });
76
+
77
+ </script>
78
+
79
+ </head>
80
+
81
+ <body>
82
+
83
+ <div id="contents">
84
+
85
+ <div id="hoge">
86
+
87
+ <?php
88
+
89
+ for ($x =1; $x < 100; $x++) {
90
+
91
+ echo 'テスト<br/>';
92
+
93
+ }
94
+
95
+ ?>
96
+
97
+ </div>
98
+
99
+ <div id="policy">
100
+
101
+ <?php
102
+
103
+ for ($i = 1; $i <= 100; $i++) {
104
+
105
+ echo $i . '回目の繰り返し<br>';
106
+
107
+ }
108
+
109
+ ?>
110
+
111
+ </div>
112
+
113
+ <div id="buttons">
114
+
115
+ <ul id="permission">
116
+
117
+ <li><button type="button" name="disagree">同意しない</button></li>
118
+
119
+ <li><button type="button" id="agree" name="agree" disabled="disabled">同意する</button></li>
120
+
121
+ </ul>
122
+
123
+ </div>
124
+
125
+ </div>
126
+
127
+ </body>
128
+
129
+ </html>
130
+
35
131
  ```
36
132
 
133
+
134
+
135
+ ```lang-css
136
+
137
+ 【style.css】
138
+
139
+ @charset "UTF-8"
140
+
141
+
142
+
143
+ body {
144
+
145
+ height:500px;
146
+
147
+ width:700px;
148
+
149
+ }
150
+
151
+
152
+
153
+ #contents {
154
+
155
+ padding-bottom: 30px;
156
+
157
+ }
158
+
159
+
160
+
37
- エラーメッセージ
161
+ #policy {
162
+
163
+ height: 200px;
164
+
165
+ width:150px;
166
+
167
+ margin: 0 auto;
168
+
169
+ overflow-y: scroll;
170
+
171
+ }
172
+
173
+
174
+
175
+ #buttons {
176
+
177
+ width:200px;
178
+
179
+ margin: 0 auto;
180
+
181
+ }
182
+
183
+
184
+
185
+ li {
186
+
187
+ display: inline-block;
188
+
189
+ list-style: none;
190
+
191
+ }
38
192
 
39
193
  ```
40
194
 
41
195
 
42
196
 
43
- ###該当のソースコード
44
-
45
- ```ここに言語を入力
46
-
47
- PHP, CSS, jQuery
48
-
49
-
50
-
51
- ここにご自身が実行したソースコードを書いてください
52
-
53
- ```
54
-
55
- 【index.php】
56
-
57
- ```ここに言語を入力
58
-
59
- <!DOCTYPE html>
60
-
61
- <html>
62
-
63
- <head>
64
-
65
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
66
-
67
- <link rel="stylesheet" href="style.css" type="text/css">
68
-
69
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
70
-
71
- <script type="text/javascript">
72
-
73
- //$('#policy').bind('scroll', function() {
74
-
75
- $('#policy').scroll(function() {
76
-
77
- scrollHeight = $(this).height();
78
-
79
- scrollPosition = $(this).height() + $(this).scrollTop();
80
-
81
-
82
-
83
-
84
-
85
- if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05) {
86
-
87
- //スクロールの位置が下部5%の範囲に来た場合
88
-
89
- $('#agree').removeAttr('disabled');
90
-
91
- }
92
-
93
- });
94
-
95
- </script>
96
-
97
- </head>
98
-
99
- <body>
100
-
101
- <div id="contents">
102
-
103
- <div id="hoge">
104
-
105
- <?php
106
-
107
- for ($x =1; $x < 100; $x++) {
108
-
109
- echo 'テスト<br/>';
110
-
111
- }
112
-
113
- ?>
114
-
115
- </div>
116
-
117
- <div id="policy">
118
-
119
- <?php
120
-
121
- for ($i = 1; $i <= 100; $i++) {
122
-
123
- echo $i . '回目の繰り返し<br>';
124
-
125
- }
126
-
127
- ?>
128
-
129
- </div>
130
-
131
- <div id="buttons">
132
-
133
- <ul id="permission">
134
-
135
- <li><button type="button" name="disagree">同意しない</button></li>
136
-
137
- <li><button type="button" id="agree" name="agree" disabled="disabled">同意する</button></li>
138
-
139
- </ul>
140
-
141
- </div>
142
-
143
- </div>
144
-
145
- </body>
146
-
147
- </html>
148
-
149
- ```
150
-
151
-
152
-
153
- 【style.css】
154
-
155
- ```ここに言語を入力
156
-
157
- @charset "UTF-8"
158
-
159
-
160
-
161
- body {
162
-
163
- height:500px;
164
-
165
- width:700px;
166
-
167
- }
168
-
169
-
170
-
171
- #contents {
172
-
173
- padding-bottom: 30px;
174
-
175
- }
176
-
177
-
178
-
179
- #policy {
180
-
181
- height: 200px;
182
-
183
- width:150px;
184
-
185
- margin: 0 auto;
186
-
187
- overflow-y: scroll;
188
-
189
- }
190
-
191
-
192
-
193
- #buttons {
194
-
195
- width:200px;
196
-
197
- margin: 0 auto;
198
-
199
- }
200
-
201
-
202
-
203
- li {
204
-
205
- display: inline-block;
206
-
207
- list-style: none;
208
-
209
- }
210
-
211
- ```
212
-
213
-
214
-
215
197
 
216
198
 
217
199
  ###試したこと
218
200
 
219
- 課題に対してアプローチしたことを記載してください
201
+
220
202
 
221
203
  以下のサイトを参考にしています。
222
204
 
223
205
  [リンク内容](https://www.softel.co.jp/blogs/tech/archives/4308)
224
-
225
-
226
-
227
- ###補足情報(言語/FW/ツール等のバージョンなど)
228
-
229
- より詳細な情報