質問編集履歴

1

コードの補足

2019/07/25 02:59

投稿

chikachi
chikachi

スコア33

test CHANGED
File without changes
test CHANGED
@@ -12,10 +12,92 @@
12
12
 
13
13
  サンプルがこちらです。
14
14
 
15
- [https://jsfiddle.net/c956fu87/
16
-
17
- ](https://jsfiddle.net/c956fu87/)
15
+ [https://jsfiddle.net/vfegb6xd/](https://jsfiddle.net/vfegb6xd/)
18
16
 
19
17
 
20
18
 
21
19
  一番下よりちょっと上で、``console.log('一番下までスクロールしました');``が表示されてしまうんです。
20
+
21
+
22
+
23
+ ###補足
24
+
25
+ mts10806さんありがとうございます。コードの補足です。
26
+
27
+
28
+
29
+ ```html
30
+
31
+ <div id="contents">
32
+
33
+ <div class="outer">
34
+
35
+ <p>hello</p>
36
+
37
+ </div>
38
+
39
+ </div>
40
+
41
+ ```
42
+
43
+ ```css
44
+
45
+ body {
46
+
47
+ overflow: hidden;
48
+
49
+ }
50
+
51
+ #contents {
52
+
53
+ overflow-y: scroll;
54
+
55
+ height: 100vh;
56
+
57
+ }
58
+
59
+ p {
60
+
61
+ height: 1000px;
62
+
63
+ background: lightblue;
64
+
65
+ }
66
+
67
+ ```
68
+
69
+ ```jQuery
70
+
71
+ $(document).ready(function(){
72
+
73
+
74
+
75
+ $('#contents').on('scroll', function() {
76
+
77
+
78
+
79
+ const docHeight = $('.outer').innerHeight();
80
+
81
+ const winHeight = $('#contents').outerHeight();
82
+
83
+ const docBottom = docHeight - winHeight;
84
+
85
+ const docScroll = $('#contents').scrollTop();
86
+
87
+
88
+
89
+ if( docBottom <= docScroll ){
90
+
91
+ console.log('一番下までスクロールしました');
92
+
93
+ }
94
+
95
+
96
+
97
+ });
98
+
99
+
100
+
101
+ });
102
+
103
+ ```