<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
                         <style>
* {
           margin:0 auto;
            padding:0;
}
::-webkit-scrollbar {
          width:0;
         height:0;
}
.div_div {
            width:100%;
            height:200px;
            overflow: hidden;
            overflow-x:auto;
            white-space: nowrap;
            background: pink;
}
.ul_ul {
           width:2000%;
           height:200px;
           background: blue;
}
.li_li {
           width:200px;
           height:200px;
           border:1px solid gray;
           background: red;
           list-style: none;
           font-size: 30px;
           text-align: center;
           display:inline-block;
           float:left;
}
                    </style>
</head>
<body>
     <div class="div_div">
            <ul class="ul_ul">
               <li class="li_li">徐文龙1</li>
               <li class="li_li">徐文龙2</li>
               <li class="li_li">徐文龙3</li>
               <li class="li_li">徐文龙4</li>
               <li class="li_li">徐文龙5</li>
               <li class="li_li">徐文龙6</li>
               <li class="li_li">徐文龙7</li>
               <li class="li_li">徐文龙8</li>
               <li class="li_li">徐文龙9</li>
               <li class="li_li">徐文龙10</li>
               <li class="li_li">徐文龙11</li>
               <li class="li_li">徐文龙12</li>
               <li class="li_li">徐文龙13</li>
               <li class="li_li">徐文龙14</li>
               <li class="li_li">徐文龙15</li>
               <li class="li_li">徐文龙16</li>
               <li class="li_li">徐文龙17</li>
               <li class="li_li">徐文龙18</li>
               <li class="li_li">徐文龙19</li>
               <li class="li_li">徐文龙20</li>
               <li class="li_li">徐文龙21</li>
               <li class="li_li">徐文龙22</li>
               <li class="li_li">徐文龙23</li>
               <li class="li_li">徐文龙24</li>
               <li class="li_li">徐文龙25</li>
               <li class="li_li">徐文龙26</li>
               <li class="li_li">徐文龙27</li>
               <li class="li_li">徐文龙28</li>
               <li class="li_li">徐文龙29</li>
            </ul>
   </div>
</body>
</html>

这个是我写的一个小demo,页面处于移动端的时候,可以左右滑动.滚动条是一个伪元素,滚动条整体部分webkit-scrollbar 都设置为0,就看不到它的样式了, 在父级盒子设置  overflow: hidden; 子级盒子设置  overflow-x:auto;
            white-space: nowrap;这两个属性实现了滚动效果. 当然li标签得设置的行内块级元素display:inline-block;

手机端左右滑动,不用写js(只有页面切换到移动端可以看)的更多相关文章

  1. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. 判断是pc端还是手机端，并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

  3. js手机端判断滑动还是点击

    网上的代码杂七杂八,  我搞个简单明了的!!  你们直接复制粘贴,  手机上 电脑上 可以直接测试!!! 上图: 上代码: <!DOCTYPE html> <html lang=&q ...

  4. 自动判断PC端、手机端跳往不同的域名JS实现代码

    输入相同域名,在pc端和移动端会出现不同的页面效果,一种是用栅格系统实现自适应, 更多的是设计两套不同的模板和两个二级域名或者一个主域名和一个二级域名(就是有区别就可以了); js代码判断浏览器的用户 ...

  5. 去除手机端触摸滑动事件ontouchmove

    window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; ...

  6. iphone手机端图片错位修正的js代码

    <script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...

  7. 一款手机端的日历插件ICalendar.js

    我的网盘:http://pan.baidu.com/s/1jIib2Ay

  8. 教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

    因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...

  9. js 浏览器页面切换事件

    document.addEventListener('visibilitychange', function() { console.log(isHidden() + "-" + ...

随机推荐

  1. Real-Time Compressive Tracking 论文笔记

    总体思想 1 利用符合压缩感知RIP条件的随机感知矩阵对多尺度图像进行降维 2 然后对降维的特征採用简单的朴素贝叶斯进行分类 算法主要流程 1 在t帧的时候,我们採样得到若干张目标(正样本)和背景(负 ...

  2. Mac下Git项目使用的.gitignore文件

    https://www.gitignore.io/ 这个网站可以搜索特定项目.系统所需要的.gitignore 我现在主要是在Mac上用Visual Studio Code进行开发,所以直接搜索Mac ...

  3. bat文件中调用传参的问题

    https://blogs.msdn.microsoft.com/twistylittlepassagesallalike/2011/04/23/everyone-quotes-command-lin ...

  4. YTU 2904: B--Faultfinding

    2904: B--Faultfinding 时间限制: 1 Sec  内存限制: 128 MB 提交: 64  解决: 33 题目描述 Do you remember the game in whic ...

  5. BZOJ4561：圆的异或并（扫描线+set||splay||线段树）

    在平面直角坐标系中给定N个圆.已知这些圆两两没有交点,即两圆的关系只存在相离和包含.求这些圆的异或面    积并.异或面积并为:当一片区域在奇数个圆内则计算其面积,当一片区域在偶数个圆内则不考虑. I ...

  6. asp.net 常用代码

    asp.net 下拉菜单选中 ddlCity.SelectedIndex = ddlCity.Items.IndexOf(ddlCity.Items.FindByValue(")); 关于. ...

  7. 解决IE和firefox 下flash盖住div的问题（转载）

    原文地址:http://www.oschina.net/question/171410_26563 做的企业站 顶部是flash的滚动图片. 右侧是在线客户,但是flash盖住了在线客户的div 网上 ...

  8. Ubuntu16.0.4安装搜狗输入法

    方法一: 1.进入搜狗linux输入法下载页面 2.进入下载好的文件目录,双击运行安装包(这点跟windows一样) 3.Ubuntu软件安装管理界面自动弹出,并显示安装按钮.点击就可以安装 方法二: ...

  9. 洛谷 P3959 宝藏【状压dp】

    一开始状态设计错了-- 设f[i][s]为当前与根节点联通状况为s,最深深度为i 转移的话枚举当前没有和根联通的点集,预处理出把这些点加进联通块的代价(枚举s中的点和当前点的连边乘以i即可),然后用没 ...

  10. spoj 371 Boxes【最小费用最大流】

    对于ai==0连接(i,t,1,0),对于ai>1(s,i,ai-1,0),然后对以相邻的两个点(i,j)连接(i,j,inf,1),注意这里是一个环的形式,所以1和n+1相连 #include ...