swiper实现局部内容滚动效果

先看一下效果图:

swiper实现局部内容滚动效果_第1张图片

swiper实现局部内容滚动效果_第2张图片

swiper实现局部内容滚动效果_第3张图片

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

具体代码如下:

<!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>

你可能感兴趣的:(前端开发)