従来学習したアクティビティThrottleとスクロールイベントを用いて,スクロール方向に基づいてタイトルをどのように表示するかを決定する論理を実現した.
既存のWebプロジェクトに機能を追加しました.

プロジェクト環境と実施方法

VUE 3、アプリケーションを使用しています.vueにはHeader素子やrouter-viewなどがあります.
機能を追加します.vueとHeadervueのみ修正しました.

	src
    	- App.vue
    	- views
    		- ...
    	- component
	    	- ...
    		- Header.vue
      

アプリケーションにマウントした後、スクロールイベントハンドラでスクロール方向を求め、方向に関する情報をHeader素子に渡すpropsを実現し、Header素子をどのように表示するかを決定します.
Headerでは一度に実装できますが、propsを渡す例を作成したいので実装します.

VUE 3 Throttle+Scroll Event Handlerの実装

イベント書き込みボックスは、イベントハンドラの実行を制限することでパフォーマンスを向上させます(?)これはできる技法です.あまりハンドルを動かす必要はないと思うので、1 s、500 ms、300 ms、100 ms、最も満足した動作の100 msに設定します.

	// App.vue

	export default {
     	setup(){
          // 스크롤 방향 정보
          const scrollDirection = ref(0); // 1: up, -1 : down
          // Throttle을 위한 ref
          const waiting = ref(false);
          // 이전 스크롤 방향을 저장하기 위한 ref
          const scrollTrace = ref(0);
          
          // Throttle이 적용된 이벤트 핸들러
          function scrollHandler(e){
            if(!waiting.value){
              	waiting.value = true; // throttle check
            
            	const currentScroll = window.scrollY; // current scrollY
            	// scroll down = -1
            	if(currentScroll > scrollTrace.value) scrollDirection.value = -1;
            	// scroll up = 1
            	else if(currentScroll < scrollTrace.value) scrollDirection.value = 1;
            	scrollTrace.value = currentScroll;
            
            	// Event Throttle 100 ms
            	setTimeout(()=>{
                	waiting.value = false;
                }, 100); 
            }
          }
          
          onMounted(()=>{
            // DOM이 마운트 되었을 때 이벤트 핸들러를 등록한다.
            document.addEventListener('scroll',scrollHandler);
          });
          
          return {
           	 scrollDirection
          }
        }
    }

アクティビティのためにドラッグを掛け、スクロールが継続して発生しても100 ms周期でHandlerを実行できます.
現在のscrollyが以前のscrollyよりも現在の値が大きい場合は、下にスクロールしていることを示します.
反対の場合はスクロール中です.

PropsをHeader構成部品に渡す

	<!--App.vue-->
	<template>
	    	<Header :scrollDirection="scrollDirection" />  
	</template>

App.vueからHeader素子まで、propsでスクロール方向に関する情報が伝達されます.

	
	// Header.vue
	export default{
     	props:{
       		scrollDirection:Number,
       },
    	setup(props){
         	const headerShownClass=computed(()=>{
            	if(props.scrollDirection === -1) return 'header_off';
             	return '';	
           	});
	
            return {
            	headerShownClass 
         	}
      	 }, 
     
   	}

Headerコンポーネントでは、propsでscrollDirectionを受信し、タイトルの位置を調整するためのclassを入れるか除去するかを決定します.

<template>
	<header class="header" :class="headerShownClass">
    	...  
  	</header>
</template>

<style scoped>
  .header{
      position:fixed;
      top:0;
      transition: top 0.2s ease-in-out;
      height: var(--size-header);
      ...
  }
  .header_off{
  	  top: calc(-1 * var(--size-header));
  }
</style>

refを使用してclassListに直接追加する方法もありますが、vueでは計算属性を使用してクラスをバインドする方が便利です.

整理する

インターンシップの際にウェブページを作成し、移動環境を考慮するため、頭が固定された位置が思ったより多くのスペースを占有しているため、コンテンツ表示の領域が大幅に減少している.
スクロール方向を検出する過程で、頭を隠すユーザー体験がもっといいと思います.代表に話してみると、すぐに反映されました.
より詳細な条件を追加して適用できます.