スワイプをJavaScriptで書いてみた

Twitterのサイドバーのような、スワイプ処理をJavascriptで書いてみました !

コードはこんな感じです.
すべてのコードはこちら

main.js

 function selector(s){
      return document.querySelector(s)
 }
        
      const t = selector('.flick_space');  // .flick_spaceはタッチ可能範囲のクラス名
      var startX;        // タッチ開始 x座標
      var moveX;        // スワイプ中の x座標
      var flag = 0 ;    // フラグ
      var nav_w =selector('nav').clientWidth ; //サイドバー幅

      // タッチ開始時： xy座標を取得
      t.addEventListener("touchstart", function(e) {
          e.preventDefault();
          startX = e.touches[0].pageX;
          
      });
  
          function limit(){
          if(moveX -startX <= nav_w){return -nav_w + (moveX - startX);
            }else{ return 0 }
          }

          function move(){
          if(moveX -startX > 0){return 0 ;
            }else{ return (moveX - startX) }
          }

          function calc(){
           if( flag == 10 ){
              var $obj1 = {
                  func: move(),
                  flag: 0
              }
              return $obj1 ;  
           } else if( flag == 0 ){
             var $obj1 = {
                 func: limit(),
                 flag: 10
             }
             return $obj1 ;  
           }    
         }
      
      // スワイプ中： xy座標を取得
      t.addEventListener("touchmove", function(event) {
         event.preventDefault();
         moveX = event.changedTouches[0].pageX;
         var $obj2 = calc();
       
           document.getElementById("nav").style.transition = "margin-left 0ms" ; 
           document.getElementById("nav").style.marginLeft =$obj2.func + 'px' ;//現在の幅(px)
    
          // console.log($obj2.flag ); 確認用
      });
       
    
      // タッチ終了時： スワイプした距離から左右どちらにスワイプしたかを判定する/距離が短い場合もとにもどる
      t.addEventListener("touchend", function(event) {event.preventDefault();
          var nav_w = selector('nav').clientWidth;
          var distance = (moveX - startX );
     
          if(distance > 40){
              flag = 10; //console.log(flag);
              selector('nav').style.transition = "margin-left  610ms ";  
              document.getElementById("nav").style.marginLeft = 0 + 'px';
      
          }else{ flag = 0; //console.log(flag);
              selector('nav').style.transition = "margin-left  610ms ";  
              document.getElementById("nav").style.marginLeft = - nav_w + 'px';
          }
      });

#ポイント

• スライドの部分は Margin-Left を使って移動させた　
  (サイドバーが完全に表示されている状態がmargin-left = 0)
• flag を付与することによって、サイドバーをスワイプしてコントロールする関数(2つある)を適切に使い分けることができる (ここでは 0 か 10)

---

.style.transition はよく見かけていたのですが、.style.marginLeft というものが使えると初めて知りました ! 確かにcssプロパティなんだからほかも使えるのは当然だなと笑　(参考までに)

誤字・脱字、コードの誤りなどありましたら、コメントお待ちしております !

ここまで読んでくださってありがとうございました.