swiper实现局部内容滚动效果

先看一下效果图:

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

具体代码如下：

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

swiper实现局部内容滚动效果相关推荐

axure8屏幕滚动_Axure教程：如何实现移动端屏幕中内容滚动效果
Axure技巧中,APP端的内容滚动效果是一个很基础的交互.之前也有很多大牛分享过如何操作,今天分享的是更为简单的方法,希望对大家有用. 两种实现方式实现方式1 要点说明:使用两个动态面板和两个热区 ...
jQuery实现的向下推送图文信息滚动效果
WEB页面需要展示网站最新信息,如微博动态.余票信息.路况监控等项目中常见的实时数据滚动效果,我们可以用jQuery来实现前端信息滚动效果.本文我们将结合实例为大家讲解如何使用jQuery来实现图文信 ...
Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
Swiper：无限循环滚动时出现空白页/页面内容不刷新
问题描述使用Swiper插件实现列表的无限循环滚动效果,记录遭遇的两个问题:①滚动到某页时界面显示空白:②用id唯一标识列表中需要动态改变的值,在改变某一id的div内容后,页面显示内容并未改变问 ...
实现当UILable的内容超出其范围后自动滚动效果
本文主要介绍 [当UILabel的内容超出其自身的宽度范围后,进行互动展示的效果],我们先来看一下Demo的效果图. 实际实现起来并不十分繁杂,在这里,为了开发的效率,我们使用了一个已经封装好的UIL ...
vue键盘抬起_vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
最近遇到了之前没有碰到过的一个问题:编辑器输入内容时,最好让内容一直保持在可视区域,比如如果区域超出的话,就在键盘抬起时向上滚动一定距离. 这个和聊天发消息还有一定的区别,聊天的话是只要点开输入框,就 ...
实现类似表格内容动态滚动效果
文章目录需求背景效果图实现思路示例代码需求背景在一些大屏首页展示上,通常会有一些表格展示,由于大屏的特殊性,不会有人专门去操作这个页面查看相应数据,一般都会采用动态滚动的效果.下面是具体的 ...
vue内容横向循环滚动_Vue替代marquee标签超出宽度文字横向滚动效果
一.npm 安装如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用在main.js引入 import marq ...
微信小程序禁用页面下拉，且局部上下滚动不卡顿
众所周知,微信小程序页面在下拉后,顶部会出现留白的不友好用户体验(当然,需要启用页面下拉刷新的另说).官网有禁用下拉的配置,但使用后,如果页面中局部区域需要滚动显示更多内容时,则会出现滚动不顺畅的情况 ...

swiper实现局部内容滚动效果

swiper实现局部内容滚动效果相关推荐

最新文章

热门文章