移动端上下滑动

黎明不管黑夜的星空

已于 2023-04-17 22:49:53 修改

阅读量549

点赞数

分类专栏：移动端文章标签： html css 前端

于 2022-07-27 20:47:07 首次发布

本文链接：https://blog.csdn.net/weixin_50930483/article/details/126022868

版权

移动端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客主要介绍了如何在移动端HTML5页面中实现侧栏菜单的手势滑动交互效果。通过JavaScript和CSS，当用户在侧栏上滑动手指时，侧栏的商品列表能上下滚动，同时在手指松开时，列表会平滑地停在相应位置。示例代码详细展示了触摸开始、移动和结束时的事件处理逻辑。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html5css3 阶段</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="wrapper">
        <header class="header"></header>
        <section class="section">
            <aside class="aside">
                <ul>
                    <li>商品名称1</li>
                    <li>商品名称2</li>
                    <li>商品名称3</li>
                    <li>商品名称4</li>
                    <li>商品名称5</li>
                    <li>商品名称6</li>
                    <li>商品名称7</li>
                    <li>商品名称8</li>
                    <li>商品名称9</li>
                    <li>商品名称10</li>
                    <li>商品名称11</li>
                    <li>商品名称12</li>
                    <li>商品名称13</li>
                    <li>商品名称14</li>
                    <li>商品名称15</li>
                    <li>商品名称16</li>
                    <li>商品名称17</li>
                    <li>商品名称18</li>
                    <li>商品名称19</li>
                    <li>商品名称20</li>
                    <li>商品名称21</li>
                    <li>商品名称22</li>
                    <li>商品名称23</li>
                    <li>商品名称24</li>
                    <li>商品名称25</li>
                    <li>商品名称26</li>
                    <li>商品名称27</li>
                    <li>商品名称28</li>
                    <li>商品名称29</li>
                    <li>商品名称30</li>
                </ul>
            </aside>
            <article class="article">
                <div>hello world</div>
            </article>
        </section>
        <footer class="footer"></footer>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
	<script>
        // 需求：
            // 移动端
            // 手指按下侧栏菜单可以上下滑动

        // 编码：
            // 定义变量 记录相关的数据
            var topValueY = 0;
            var parentHeight = $(".aside").height();
            var childHeight = $(".aside ul").height();
            var bottomValueY = parentHeight - childHeight;
            var space = 120;
            // console.log(parentHeight , childHeight);
            // 是否按下侧栏菜单的布尔值
            var isTouchStart = false;
            // 手指按下页面的坐标位置
            var startY = 0;
            // 手指滑动页面的坐标位置
            var moveY = 0;
            // 记录滑动的距离
            var distanceY = 0;
            // 侧栏菜单当前的位置
            var curY = 0;

            // 事件绑定
            // jquery 对象 转 DOM对象 $(".aside")[0].ontouchstart = function(event){}

            // 手指按下侧栏菜单
            $(".aside").on("touchstart",function(event){
                // console.log("test",event);
                // 记录手指按下的信息
                startY = event.touches[0].pageY;
                isTouchStart = true;
            })

            // 手指在页面上滑动
            $(document).on("touchmove",function(event){
                // console.log("test",event);
                if(isTouchStart){
                    // 停止动画
                    $(".aside ul").stop();
                    // 记录手指滑动的信息
                    moveY = event.touches[0].pageY;
                    // 计算手指滑动了多少
                    distanceY =  moveY - startY + curY ;
                    // 判断条件
                    if(distanceY <= (topValueY + space) && distanceY >= (bottomValueY - space)){
                         // 设置ul标签的位置
                        $(".aside ul").css({top: distanceY})
                    }
                   
                }
            })

            // 手指在页面松开
            $(document).on("touchend",function(){
                // 判断侧栏菜单是否大于  0 topValueY
                if(distanceY > topValueY){
                    distanceY = topValueY;
                    $(".aside ul").animate({top: distanceY},300);
                }else
                // 判断侧栏菜单是否小于
                if(distanceY < bottomValueY){
                    distanceY = bottomValueY;
                    $(".aside ul").animate({top: distanceY},300);
                }else {
                    curY = distanceY ;
                }
                // 记录手指松开页面的信息
                isTouchStart = false;
            })




    </script>
</body>
</html>

style.css

body {
    margin: 0;
    user-select: none;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}


html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.wrapper {
    height: 100%;
    overflow: hidden;
}
.header , .footer {
    width: 100%;
    height: 50px;
    background-color: rgb(224, 102, 122,.5);
    position: fixed;
    left: 0;
    z-index: 10000;
}
.header {   
    top: 0;
}
.footer {
    bottom: 0;
}
.section {
    width: 100%;
    height: 100%;
    box-sizing: border-box;/*移动常用属性*/
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
}
.section .aside {
    width: 120px;
    flex-basis: 120px;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.section .aside ul {
    width: 120px;
    background-color: #ccc;
    position: absolute;
    top: 0px;
    left: 0px;
}
.section .aside ul li {
    font-size: 15px;
    color: #666;
    text-align: center;
    line-height: 40px;
    height: 40px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: #fff;
}
.section .article {
    background-color: skyblue;
    flex-grow: 1;
}
.section .article > div {
    padding: 20px 15px;
    font-size: 20px;
}