swiper实现局部内容滚动效果
生活随笔
收集整理的這篇文章主要介紹了
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>這時人群中爆發出激烈的掌聲，我知道，這是我又一次堅持原則，換來的榮譽的贊賞! </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实现局部内容滚动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 幼儿园时间管理《小明的一天》幼小衔接数学
- 下一篇： 禁止页面缩放