teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問CSS JavaScript 重ねあった要素のスクロール

編集履歴

質問編集履歴

2

追記

2021/07/08 23:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -59,3 +59,53 @@
59
59
 
60
60
 
61
61
  ```
62
+
63
+
64
+
65
+
66
+
67
+
68
+
69
+ ```ここに言語を入力
70
+
71
+ 参考サイトを参考に書いたコード
72
+
73
+ 背面のボタンもクリックできずスクロールもできない
74
+
75
+
76
+
77
+ <style>
78
+
79
+ body,html{
80
+
81
+ height:100%;
82
+
83
+ margin:0;
84
+
85
+ }
86
+
87
+ .scroll{
88
+
89
+ overflow-y:scroll;
90
+
91
+ }
92
+
93
+ </style>
94
+
95
+
96
+
97
+ <div class="scroll" style="position:absolute;z-index:-1;width:50%;height:1000px;background:rgba(166,230,18,0.6)">
98
+
99
+ <input type="button" value="aaaa" onclick="alert('test')">
100
+
101
+ A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
102
+
103
+ </div>
104
+
105
+ <div class="scroll" style="pointer-events: none;position:absolute;z-index:1;width:50%;height:50%;background:rgba(18,71,230,0.7)">
106
+
107
+ A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>
108
+
109
+ </div>
110
+
111
+ ```

1

追記

2021/07/08 23:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,13 @@
8
8
 
9
9
 
10
10
 
11
- event.stopPropagation()
12
-
13
- この辺が関係してるからと思ってますが、実現できませんでした
11
+ できればJavaScriptのscroll命令は使わず、実現する方法があれば、
14
12
 
15
13
  詳しい方回答お願いいたします
14
+
15
+
16
+
17
+ [参考](https://haayaaa.hatenablog.com/entry/2019/03/07/204958)
16
18
 
17
19
 
18
20
 
@@ -29,8 +31,6 @@
29
31
  height:100%;
30
32
 
31
33
  margin:0;
32
-
33
- overflow-y:hidden;
34
34
 
35
35
  }
36
36