swiper实现局部内容滚动效果

最新推荐文章于 2024-08-19 12:12:08 发布

马优晨

最新推荐文章于 2024-08-19 12:12:08 发布

阅读量2.3w

点赞数 2

分类专栏：前端开发文章标签：实现局部滚动 JS设置局部上下滑动 JS设置局部滑动效果实现局部上下滑动效果 swiper局部滑动

本文链接：https://blog.csdn.net/qq_24147051/article/details/75386526

版权

前端开发专栏收录该内容

233 篇文章 27 订阅

订阅专栏

先看一下效果图:

这里写图片描述

在蓝色的背景里面文字可以上下滚动，这个就是我们需要的效果。

具体代码如下：

<!DOCTYPE html>
<!-- saved from url=(0054)http://www.swiper.com.cn/demo/32-scroll-container.html -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Swiper demo</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        name="viewport">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.4.6/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #fff;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            margin-top: 50px;
            height: 300px;
            overflow: hidden;
            background: cyan;
            -webkit-overflow-scrolling: touch
        }

        .swiper-slide {
            font-size: 18px;
            height: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 30px;
            font-size: 13px;
            font-family: microsoft yahei;
            line-height: 1.8;
        }

        p {

            margin-bottom: 1em;
        }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container swiper-container-vertical swiper-container-free-mode">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-active">
                <h4>-------------------------程序猿,你也配吃10元的盒饭?----------------------------------</h4>
                <p>又是一个阳光灿烂的中午，看了一上午的报纸，茶水也顺带喝了不少，肚子早已经咕咕作响了，今天中午吃点什么了，貌似楼下的新开张的盒饭还不错，于是我来到楼下准备买上一盒。<br>
                    菜色还不错，价格有6元，8元，10元，12元，20元的，像哥这样的精英管理人才，怎么着也的吃最高级的才配合身份，就在我准备购买时，一个响亮的声音响起。</p>
                <p>"老板，给我一份10元的盒饭"。</p>
                <p>顺势撇了一眼，一个小伙子，眉开眼笑的靠近盒饭铺，今天是1号，看样子是发工资了。就当他走近时，看到了我，刚才的欢愉的表情瞬时黯淡下去，他知道我认出了他，靠，满头白里带一点黑的头发，永远没睡醒的眼神，以及那凌乱的胡渣子，都出卖了他的身份。我继续狠狠的盯着他，他越发的羞愧了，我犀利的眼神正在和他做着底层通信，我默默的向他传达一个信息，<br>
                    "你，也配吃10元的盒饭?"。</p>
                <p> 他哀怜的眼神似乎在祈求我不要拆穿他的身份，可惜，哥这么有正义感的人，怎么能在这个时候放弃原则!<br>
                    "你不是隔壁公司的程序员么?"<br>
                    就这一瞬间，他整个人似乎崩溃下去，刚才欢愉的表情彻底变为哭丧，周围的小摊贩以及路人甲乙丙丁，都纷纷投来了鄙视的眼光，他瘟鸡一样的双手抓着头发，痛苦的蹲了下去。</p>
                <p> 就在这时，人群中终于有人忍不住了，大声呵骂到，<br>
                    "呸，程序员也敢吃10元的盒饭，真不要脸"<br>
                    一位老大娘好心的提醒到，<br>
                    "小伙子啊，你一个程序员，挣点钱不容易啊，怎么吃10元的盒饭啊"</p>
                <p>一名打扮妖艳入时的姑娘说到，<br>
                    "人家当小姐的都才吃10元，你也敢要10元的?"<br>
                    我义正言辞的给他说到，<br>
                    "我说一句话顶你写一万行代码，也才吃20元的盒饭，你竟敢吃10元的"<br>
                    老板也发话了，<br>
                    "是程序员啊，太不好意思了，你吃6元的吧，不然人家知道我卖了你10元的，我这生意就做不了啊"</p>
                <p> 他终于发出颤抖的声音说到<br>
                    "对不起，我刚才说错了，给我一份6元的"。<br>
                    这时人群中爆发出激烈的掌声，我知道，这是我又一次坚持原则，换来的荣誉的赞赏!
                    &nbsp;</p>
            </div>
        </div>
        <!-- Add Scroll Bar -->
        <div class="swiper-scrollbar" style="opacity: 0;">
            <div class="swiper-scrollbar-drag" style="height: 532.742px;"></div>
        </div>
    </div>

    <!-- Swiper JS -->
    <script src="https://cdn.bootcss.com/Swiper/4.4.6/js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            scrollbar: '.swiper-scrollbar',
            direction: 'vertical',
            slidesPerView: 'auto',
            mousewheelControl: true,
            freeMode: true,
            roundLengths: true, //防止文字模糊
        });
    </script>

</body>

</html>