質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4238閲覧

【Vue/Nuxt/Javascript】要素内でスクロール完了した際に、要素の表示/非表示を切り替えたい!

aa316316

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/25 06:58

編集2019/04/25 07:16

前提・実現したいこと

現在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"

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

基本的には、scrollイベント発生時にスクロール位置が一番下かどうかをチェックすればいいと思います。スクロール位置が一番下かどうかはjavascriptでは次のように取得できます。

javascript

1element.scrollHeight - element.scrollTop === element.clientHeight

Determine if an element has been totally scrolled - MDN

ただし、質問内容にあるように動的にテキストが変わり、高さ以内に収まっていたテキストが高さ以上になったときにもグラデーションを表示するようにしなければいけないため、Vueのupdatedイベント時にもチェックするといいと思います。

非表示というよりも、スッと消えるようなtransitionをつけれたらと思っています。

単にCSSのtransitionで実現するのがいいと思います。

Demo(CodeSandbox)

投稿2019/04/25 18:29

編集2019/05/09 08:34
karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問