質問編集履歴
3
再度、htmlのサイドバーのコンテンツ量追加しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
<aside class="sidebar">
|
|
46
46
|
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
47
47
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
48
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
48
49
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <span style="color: red">sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
|
|
49
50
|
</aside>
|
|
50
51
|
</main>
|
|
@@ -53,6 +54,8 @@
|
|
|
53
54
|
<script src="./main.js"></script>
|
|
54
55
|
</body>
|
|
55
56
|
</html>
|
|
57
|
+
|
|
58
|
+
|
|
56
59
|
```
|
|
57
60
|
|
|
58
61
|
```scss
|
2
htmlとcssを記載して最小単位で動かせるようにしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
### 前提
|
|
2
|
-
`position: sticky`で追従型にしています。
|
|
2
|
+
- `position: sticky`で追従型にしています。
|
|
3
|
+
- 記事部分は無限スクロールコンテンツ
|
|
3
4
|
|
|
4
5
|
### 実現したいこと
|
|
5
6
|
|
|
@@ -19,9 +20,146 @@
|
|
|
19
20
|
②スクロール位置が50より大きくスクロールされたらサイドバーのポジションを100pxにし、scrollTopで2000まで移動する
|
|
20
21
|
③スクロール位置が50を下回ったらそれぞれ元に戻す ← animate({scrollTop: 0}がうまくいかない
|
|
21
22
|
|
|
23
|
+
最小構成にしたところ
|
|
24
|
+
少なくともなぜか③がうまくいきましたが、実データではうまくいきません。
|
|
25
|
+
また最小構成でも、サイドバーにフォーカスを当ててスクロールしてもうまくサイドバーのみスクロールができないのは実データと同様です。
|
|
26
|
+
|
|
22
27
|
### 該当のソースコード
|
|
28
|
+
最小構成にしています
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<!DOCTYPE html>
|
|
32
|
+
<html lang="en">
|
|
33
|
+
<head>
|
|
34
|
+
<meta charset="UTF-8">
|
|
35
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
36
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
37
|
+
<title>Document</title>
|
|
38
|
+
<link rel="stylesheet" href="./style.css">
|
|
39
|
+
</head>
|
|
40
|
+
<body>
|
|
41
|
+
<main class="top">
|
|
42
|
+
<article>
|
|
43
|
+
<div id="contents"></div>
|
|
44
|
+
</article>
|
|
45
|
+
<aside class="sidebar">
|
|
46
|
+
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
47
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
48
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, <span style="color: red">sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
|
|
49
|
+
</aside>
|
|
50
|
+
</main>
|
|
51
|
+
|
|
52
|
+
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
|
53
|
+
<script src="./main.js"></script>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
```scss
|
|
59
|
+
body {
|
|
60
|
+
overflow-x: hidden;
|
|
61
|
+
color: #474645;
|
|
62
|
+
background: #FFFCFC;
|
|
63
|
+
overscroll-behavior: none;
|
|
64
|
+
main {
|
|
65
|
+
padding: 0 20px;
|
|
66
|
+
aside.sidebar {
|
|
67
|
+
display: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
@media screen and (min-width:768px) {
|
|
71
|
+
main {
|
|
72
|
+
display: flex;
|
|
73
|
+
justify-content: space-between;
|
|
74
|
+
width: 640px;
|
|
75
|
+
margin: 0 auto;
|
|
76
|
+
padding: 0;
|
|
77
|
+
article {
|
|
78
|
+
width: 100%;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
@media screen and (min-width:1024px) {
|
|
83
|
+
main {
|
|
84
|
+
width: 880px;
|
|
85
|
+
margin: 0 auto;
|
|
86
|
+
article {
|
|
87
|
+
width: 70%;
|
|
88
|
+
}
|
|
89
|
+
aside.sidebar {
|
|
90
|
+
display: block;
|
|
91
|
+
width: 24%;
|
|
92
|
+
padding: 0 0 300px 0;
|
|
93
|
+
position: sticky;
|
|
94
|
+
top: 0;
|
|
95
|
+
height: 100vh;
|
|
96
|
+
transition: 0.5s;
|
|
97
|
+
overflow-y: scroll;
|
|
98
|
+
-ms-overflow-style: none;
|
|
99
|
+
scrollbar-width: none;
|
|
100
|
+
&::-webkit-scrollbar {
|
|
101
|
+
display:none;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
@media screen and (min-width:1120px) {
|
|
107
|
+
main {
|
|
108
|
+
width: 1024px;
|
|
109
|
+
article {
|
|
110
|
+
width: 680px;
|
|
111
|
+
}
|
|
112
|
+
aside.sidebar {
|
|
113
|
+
width: 240px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
```
|
|
23
119
|
|
|
24
120
|
```js
|
|
121
|
+
// 簡易無限スクロールコンテンツ
|
|
122
|
+
(() => {
|
|
123
|
+
window.fetch = url => new Promise(resolve => {
|
|
124
|
+
setTimeout(() => {
|
|
125
|
+
const content = '<div>コンテンツが入ります</div>';
|
|
126
|
+
resolve({ text: async () => content });
|
|
127
|
+
}, 100)
|
|
128
|
+
});
|
|
129
|
+
})();
|
|
130
|
+
(() => {
|
|
131
|
+
const contents = document.getElementById('contents');
|
|
132
|
+
|
|
133
|
+
const infiniteScrollObserver = new IntersectionObserver(entries => {
|
|
134
|
+
entries.forEach(entry => {
|
|
135
|
+
if (!entry.isIntersecting) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
infiniteScrollObserver.unobserve(entry.target);
|
|
139
|
+
loadContent();
|
|
140
|
+
});
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
let i = 0;
|
|
144
|
+
const max = 2147483647;
|
|
145
|
+
|
|
146
|
+
const loadContent = async () => {
|
|
147
|
+
const response = await fetch('https://example.com/load?i=' + i);
|
|
148
|
+
|
|
149
|
+
contents.insertAdjacentHTML('beforeend',
|
|
150
|
+
'<div>' +
|
|
151
|
+
'<div>#' + (i + 1) + '</div>' +
|
|
152
|
+
await response.text() +
|
|
153
|
+
'</div>'
|
|
154
|
+
);
|
|
155
|
+
i++;
|
|
156
|
+
if ( i < max ) infiniteScrollObserver.observe(contents.lastElementChild);
|
|
157
|
+
};
|
|
158
|
+
loadContent();
|
|
159
|
+
})(); // ここまで簡易無限スクロールコンテンツ
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
$(function(){
|
|
25
163
|
$(window).on('scroll', function () {
|
|
26
164
|
if($(window).scrollTop() > 50) {
|
|
27
165
|
$('.sidebar').css('top', '100px').animate({scrollTop: 2000}, 100);
|
|
@@ -29,4 +167,5 @@
|
|
|
29
167
|
$('.sidebar').css('top', '0').animate({scrollTop: 0}, 100);
|
|
30
168
|
}
|
|
31
169
|
});
|
|
170
|
+
});
|
|
32
171
|
```
|
1
一部変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
【考えたロジック】
|
|
18
18
|
①windowスクロールされたら作動
|
|
19
19
|
②スクロール位置が50より大きくスクロールされたらサイドバーのポジションを100pxにし、scrollTopで2000まで移動する
|
|
20
|
-
③スクロール位置が50を下回ったらそれぞれ元に戻す ←
|
|
20
|
+
③スクロール位置が50を下回ったらそれぞれ元に戻す ← animate({scrollTop: 0}がうまくいかない
|
|
21
21
|
|
|
22
22
|
### 該当のソースコード
|
|
23
23
|
|