前提・実現したいこと
現在Vue(Nuxt)で開発を行っていますが、わからない点があるため質問させてください。
スクロール可能なある要素内で、要素下部にposition: fixed;
で固定した透過グラデーションの要素を配置し、スクロール可能なことを示そうとしています。
スクロール可能な場合はこの要素を配置したままで良いのですが、スクロールを最後まで完了した場合にこの要素を非表示にしたいと考えています。非表示というよりも、スッと消えるようなtransitionをつけれたらと思っています。
また、再度上にスクロールした際には再び透過の要素を表示したいと考えています。
Vueのプロジェクト内で以上のような動作を実装する場合、何か良い方法はありますでしょうか。
アドバイス等いただけますと大変助かります。
なお、要素内のテキストは動的に取得しており、mounted
内のajaxで取得した別ファイルのHTMLを指定したタグ内に挿入しています。
該当コード
html
1<div class="contents__wrapper"> 2 <div class="contents__inner-wrapper"> 3 <p class="section__subtitle"> 4 タイトルが入ります。 5 </p> 6 <div class="text-wrapper"> 7 <section class="text__inner-wrapper"> 8 <transition name="transition"> 9 <!-- 以下ajaxで取得した外部HTMLを挿入 --> 10 <div class="text" v-html="contents__text"></div> 11 </transition> 12 <div :class="scrollableFade"></div> 13 </section> 14 </div> 15 </div> 16</div>
css
1.contents-wrapper { 2 width: 612px; 3 background-color: rgba(0, 0, 0, 0.05); 4} 5.contents__inner-wrapper { 6 height: auto; 7 margin: 0 auto; 8 position: relative; 9} 10.section__subtitle { 11 padding: 26px 0 33px 32px; 12 border-bottom: 1px solid rgba(0, 0, 0, 0.3); 13} 14.text-wrapper { 15 height: 606px; 16 padding: 30px; 17 overflow: scroll; 18 overflow-x: hidden; 19 text-align: justify; 20} 21.text-wrapper::-webkit-scrollbar { 22 width: 10px; 23} 24.text-wrapper::-webkit-scrollbar-thumb { 25 background: rgba(0, 0, 0, 0.3); 26 border-radius: 100px; 27} 28.scrollableFade { 29 width: 100%; 30 height: 100px; 31 position: absolute; 32 left: 0; 33 bottom: -2px; 34 background: linear-gradient( 35 180deg, 36 rgba(255, 255, 255, 0), 37 rgba(232, 232, 232) 38 ); 39 border-radius: 0 0 10px 10px; 40}
javascript
1<script> 2export default { 3 data() { 4 return { 5 contents__text: null 6 }; 7 }, 8 mounted() { 9 this.$nextTick(() => { 10 this.$axios 11 .get("xxx/xxx) 12 .then(response => { 13 this.contents__text = response.data; 14 }); 15 }); 16 } 17}; 18</script>
補足情報(FW/ツールのバージョンなど)
"nuxt": "^2.4.2"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。