teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【Vue/Nuxt/Javascript】要素内でスクロール完了した際に、要素の表示/非表示を切り替えたい！

編集履歴

質問編集履歴

4

微修正

2019/04/25 07:16

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -162,7 +162,7 @@
162
162
 
163
163
  return {
164
164
 
165
- agreement__doc: null
165
+ contents__text: null
166
166
 
167
167
  };
168
168
 
@@ -178,7 +178,7 @@
178
178
 
179
179
  .then(response => {
180
180
 
181
- this.agreement__doc = response.data;
181
+ this.contents__text = response.data;
182
182
 
183
183
  });
184
184
 

3

微修正

2019/04/25 07:16

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -156,12 +156,6 @@
156
156
 
157
157
  <script>
158
158
 
159
- import Navigation from "~/components/Navigation.vue";
160
-
161
- import Btn from "~/components/Btn.vue";
162
-
163
-
164
-
165
159
  export default {
166
160
 
167
161
  data() {

2

追加

2019/04/25 07:15

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -152,6 +152,52 @@
152
152
 
153
153
  ```
154
154
 
155
+ ```javascript
156
+
157
+ <script>
158
+
159
+ import Navigation from "~/components/Navigation.vue";
160
+
161
+ import Btn from "~/components/Btn.vue";
162
+
163
+
164
+
165
+ export default {
166
+
167
+ data() {
168
+
169
+ return {
170
+
171
+ agreement__doc: null
172
+
173
+ };
174
+
175
+ },
176
+
177
+ mounted() {
178
+
179
+ this.$nextTick(() => {
180
+
181
+ this.$axios
182
+
183
+ .get("xxx/xxx)
184
+
185
+ .then(response => {
186
+
187
+ this.agreement__doc = response.data;
188
+
189
+ });
190
+
191
+ });
192
+
193
+ }
194
+
195
+ };
196
+
197
+ </script>
198
+
199
+ ```
200
+
155
201
  ### 補足情報（FW/ツールのバージョンなど）
156
202
 
157
203
 

1

追加

2019/04/25 07:15

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,128 @@
30
30
 
31
31
 
32
32
 
33
+ ### 該当コード
34
+
35
+ ```html
36
+
37
+ <div class="contents__wrapper">
38
+
39
+ <div class="contents__inner-wrapper">
40
+
41
+ <p class="section__subtitle">
42
+
43
+ タイトルが入ります。
44
+
45
+ </p>
46
+
47
+ <div class="text-wrapper">
48
+
49
+ <section class="text__inner-wrapper">
50
+
51
+ <transition name="transition">
52
+
53
+ <!-- 以下ajaxで取得した外部HTMLを挿入 -->
54
+
55
+ <div class="text" v-html="contents__text"></div>
56
+
57
+ </transition>
58
+
59
+ <div :class="scrollableFade"></div>
60
+
61
+ </section>
62
+
63
+ </div>
64
+
65
+ </div>
66
+
67
+ </div>
68
+
69
+ ```
70
+
71
+ ```css
72
+
73
+ .contents-wrapper {
74
+
75
+ width: 612px;
76
+
77
+ background-color: rgba(0, 0, 0, 0.05);
78
+
79
+ }
80
+
81
+ .contents__inner-wrapper {
82
+
83
+ height: auto;
84
+
85
+ margin: 0 auto;
86
+
87
+ position: relative;
88
+
89
+ }
90
+
91
+ .section__subtitle {
92
+
93
+ padding: 26px 0 33px 32px;
94
+
95
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
96
+
97
+ }
98
+
99
+ .text-wrapper {
100
+
101
+ height: 606px;
102
+
103
+ padding: 30px;
104
+
105
+ overflow: scroll;
106
+
107
+ overflow-x: hidden;
108
+
109
+ text-align: justify;
110
+
111
+ }
112
+
113
+ .text-wrapper::-webkit-scrollbar {
114
+
115
+ width: 10px;
116
+
117
+ }
118
+
119
+ .text-wrapper::-webkit-scrollbar-thumb {
120
+
121
+ background: rgba(0, 0, 0, 0.3);
122
+
123
+ border-radius: 100px;
124
+
125
+ }
126
+
127
+ .scrollableFade {
128
+
129
+ width: 100%;
130
+
131
+ height: 100px;
132
+
133
+ position: absolute;
134
+
135
+ left: 0;
136
+
137
+ bottom: -2px;
138
+
139
+ background: linear-gradient(
140
+
141
+ 180deg,
142
+
143
+ rgba(255, 255, 255, 0),
144
+
145
+ rgba(232, 232, 232)
146
+
147
+ );
148
+
149
+ border-radius: 0 0 10px 10px;
150
+
151
+ }
152
+
153
+ ```
154
+
33
155
  ### 補足情報（FW/ツールのバージョンなど）
34
156
 
35
157