javascript - jQuery 可滑动底页

问题描述

我正在尝试创建与 Material.io 可用于底页的类似功能，但使用 jQuery。

我发现为 React 写的类似的东西有一个很好的图像来解释。 React 可滑动底片

我从几个 jQuery 'touch' 模块开始，但发现@roko-c-buljan使用纯 jQuery 有一个很好的开始方法（如何创建可拖动的菜单 div（桌面和移动））。

我试图使用该示例作为从底部而不是顶部工作的起点，同时也让它优雅地捕捉 - 就像在 React 图像中一样，但在两个不同的级别：距离底部 200 像素，并且还捕捉到top - 以相同的过渡效果继续移动到相同方向的下一个捕捉点。

我基本上是在使用带有触摸功能的 jQuery 为底部工作表寻找 Material.io 设计。

在遇到许多障碍之后，我目前处于代码的这一点，并希望这比我想象的要近得多。

请注意，此代码仅在您的浏览器中使用触摸模式时运行

$(document).ready(function () {
      
      var $MB = $('#menu_btn'),
          $M = $('#menu'),
          bheight = $(".container-fluid").height(),
          startBottom,
          startAtY = 10,
          endAtY = bheight-10,
          clickedAtY,
          clickEventType = document.ontouchstart !== null ? 'mousedown' : 'touchstart',
          moveEventType  = document.ontouchmove  !== null ? 'mousemove' : 'touchmove' ,
          endEventType   = document.ontouchend   !== null ? 'mouseup'   : 'touchend'  ;
      
      startBottom = -1 * bheight + 100;
      $M.css("bottom",startBottom);
      $MB.on(clickEventType, function( e ) { 
        e.preventDefault();  
        clickedAtY	= e.pageY - $(this).offset().top;
        if(clickEventType === 'touchstart'){
          clickedAtY = e.originalEvent.touches[0].pageY - $(this).offset().top;
        }
        $MB.on(moveEventType, moveHandler)
            .on(endEventType, stopHandler);
      });

      function moveHandler( e ) {
        var posY = e.pageY - clickedAtY;
        if(moveEventType === 'touchmove') {
          posY = e.originalEvent.touches[0].pageY - clickedAtY;
        }
        posY = Math.min( Math.max(0, posY), endAtY - startAtY);
        $M.css({top: posY});
      }

      function stopHandler() {
        $MB.off(moveEventType, moveHandler)
            .off(endEventType,  stopHandler);
      }

    });

html, body {
      height: 100%;
    }
    body {
      overflow-x: hidden;
    }
    #main {
      background-color: rgb(112, 112, 112);
    }
    #header-section {
      height: 40px;
      background-color: rgb(78, 78, 78);
    }
    #menu_btn {
      background-color: green;
    }
    #menu {
      position: fixed;
      left: 10px;
      width: 95% !important;
      height: 90%;
      z-index: 900;
      background-color: rgb(120, 110, 163);
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Swipeable Bottom Sheet</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>

  <div class="container-fluid d-flex h-100 flex-column p-0">
    <!-- header -->
    <div id="header-section" class="d-flex">
      Header Section
    </div>
    <!-- Content -->
    <div id="main-section" class="d-flex flex-fill">
      
      <!-- bottom sheet -->
      <div id="menu">
        <div id="menu_btn">
          SWIPE AREA
        </div>
        <div>
          bottom sheet content
        </div>
      </div>

      <!-- main -->
      <div id="main" class="flex-grow-1">
        Main Content
      </div>
    </div>

  </div>

  <!-- SCRIPTS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  
</body>

</html>

标签： javascriptjquerybottom-sheet

javascript - jQuery 可滑动底页

问题描述

解决方案

推荐阅读