質問編集履歴
8
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -151,3 +151,19 @@
|
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
```
|
|
154
|
+
|
|
155
|
+
IE11に対応するなら(アロー関数とテンプレートリテラルが使えないため)
|
|
156
|
+
|
|
157
|
+
``` JavaScript
|
|
158
|
+
|
|
159
|
+
window.addEventListener('scroll', function(){
|
|
160
|
+
|
|
161
|
+
fixedScroll.style.backgroundPositionY = window.pageYOffset + "px";
|
|
162
|
+
|
|
163
|
+
})
|
|
164
|
+
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
ご協力ありがとうございました。
|
7
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
```html
|
|
4
4
|
|
|
5
|
-
<div class="st-skew">
|
|
5
|
+
<div class="st-skew" id="sc-skew">
|
|
6
6
|
|
|
7
7
|
<ul>
|
|
8
8
|
|
6
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -146,9 +146,7 @@
|
|
|
146
146
|
|
|
147
147
|
window.onscroll = e => {
|
|
148
148
|
|
|
149
|
-
if(/Edge/\d./i.test(navigator.userAgent)) fixedScroll.style.backgroundPositionY = `${window.pageYOffset}px`;
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
fixedScroll.style.backgroundPositionY = `${window.pageYOffset}px`;
|
|
152
150
|
|
|
153
151
|
}
|
|
154
152
|
|
5
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -152,6 +152,4 @@
|
|
|
152
152
|
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
コード
|
|
156
|
-
|
|
157
155
|
```
|
4
解決方法を記述しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -135,3 +135,23 @@
|
|
|
135
135
|
|
|
136
136
|
|
|
137
137
|
firefoxでもedgeと同様になる
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
解決案
|
|
142
|
+
|
|
143
|
+
```JavaScript
|
|
144
|
+
|
|
145
|
+
const fixedScroll = document.querySelector('#sc-skew ul')
|
|
146
|
+
|
|
147
|
+
window.onscroll = e => {
|
|
148
|
+
|
|
149
|
+
if(/Edge/\d./i.test(navigator.userAgent)) fixedScroll.style.backgroundPositionY = `${window.pageYOffset}px`;
|
|
150
|
+
|
|
151
|
+
else fixedScroll.style.backgroundPositionY = `${document.documentElement.scrollTop}px`;
|
|
152
|
+
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
コード
|
|
156
|
+
|
|
157
|
+
```
|
3
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -131,3 +131,7 @@
|
|
|
131
131
|
edgeだと背景は固定ではなくなる。
|
|
132
132
|
|
|
133
133
|
原因はbackground-attachment: fixedとtransformの混在によるもの
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
firefoxでもedgeと同様になる
|
2
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -119,3 +119,15 @@
|
|
|
119
119
|
before要素などそこにバックグラウンドを指定して
|
|
120
120
|
|
|
121
121
|
position:fixed;なども試したが、だめでした。
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
追記
|
|
126
|
+
|
|
127
|
+
仕様：斜めに傾けたコンテンツに固定の背景を設定している。
|
|
128
|
+
|
|
129
|
+
edge以外のブラウザでは、背景は固定されているが、
|
|
130
|
+
|
|
131
|
+
edgeだと背景は固定ではなくなる。
|
|
132
|
+
|
|
133
|
+
原因はbackground-attachment: fixedとtransformの混在によるもの
|
1
言語設定の変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
```
|
|
51
|
+
``` SCSS
|
|
52
52
|
|
|
53
53
|
.st-skew{
|
|
54
54
|
|