swiper实现局部内容滚动效果先看⼀下效果图:
在蓝⾊的背景⾥⾯⽂字可以上下滚动，这个就是我们需要的效果。
具体代码如下：
<!DOCTYPE html>
<!-- saved from url=(0054)www.swiper/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="cdn.bootcss/Swiper/4.4.6/css/swiper.min.css">
<!-- Demo styles -->
<style>
html,
body {
html滚动效果代码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>
这时⼈中爆发出激烈的掌声，我知道，这是我⼜⼀次坚持原则，换来的荣誉的赞赏!
</p>
</div>
</div>
<!-- Add Scroll Bar -->
<div class="swiper-scrollbar" >
<div class="swiper-scrollbar-drag" ></div>
</div>
</div>
<!-- Swiper JS-->
<script src="cdn.bootcss/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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论