手机端左右滑动,不用写js(只有页面切换到移动端可以看)
<!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(只有页面切换到移动端可以看)的更多相关文章
- 关于手机端适配的问题（rem，页面缩放）
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- 判断是pc端还是手机端，并跳转到相应页面
<!-- 判断浏览器是否为手机端 --> <script> // class ! function(navigator) { var user ...
- js手机端判断滑动还是点击
网上的代码杂七杂八, 我搞个简单明了的!! 你们直接复制粘贴, 手机上 电脑上 可以直接测试!!! 上图: 上代码: <!DOCTYPE html> <html lang=&q ...
- 自动判断PC端、手机端跳往不同的域名JS实现代码
输入相同域名,在pc端和移动端会出现不同的页面效果,一种是用栅格系统实现自适应, 更多的是设计两套不同的模板和两个二级域名或者一个主域名和一个二级域名(就是有区别就可以了); js代码判断浏览器的用户 ...
- 去除手机端触摸滑动事件ontouchmove
window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; ...
- iphone手机端图片错位修正的js代码
<script type="text/javascript"> $(function(){ // 获取终端的相关信息 var Terminal = { // 辨别移动终 ...
- 一款手机端的日历插件ICalendar.js
我的网盘:http://pan.baidu.com/s/1jIib2Ay
- 教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...
- js 浏览器页面切换事件
document.addEventListener('visibilitychange', function() { console.log(isHidden() + "-" + ...
随机推荐
- 暴力破解zip文件
#coding=utf-8 """ 用户输入-z参数指定要破解的zip文件,输入-d参数输入字典文件,即可暴力破解加密的zip文件 """ ...
- Android SDK update被墙
1.输入命令:$ sudo gedit /etc/hosts 2.在打开的 /etc/hosts 在文件的末尾添加下面一句:74.125.237.1 dl-ssl.google.com
- 自己写的Android端HttpUtil工具类
package com.sxt.jcjd.util; import java.io.IOException; import java.io.UnsupportedEncodingException; ...
- ul、li中的DIV垂直居中
当li高度可动态改变时,li中的DIV始终保持垂直居中. 由于高度不固定,不能用margin或者padding解决. 最头疼的是vertical-align: middle;也莫名其妙的失效了. 最终 ...
- Setting Up FastCGI Proxying
http://nginx.org/en/docs/beginners_guide.html
- apache配置访问限制
1.禁止访问某些文件/目录 增加Files选项来控制,比如要不允许访问 .txt扩展名的文件,保护php类库: <Files ~ "\.txt$"> Order all ...
- 网站图片增强JS插件2.0(兼容IE&FF)
网站图片增强JS插件2.0简单介绍:插件可以增强网站互动能力与外链建设,用户在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播,增强外链建设,通过用户互动创造外链.(支持:放大缩小 ...
- Android ConstraintLayout详解
1. 概述 在本篇文章中,你会学习到有关ConstraintLayout -- 一种构建于弹性Constraints(约束)系统的新型Android Layout.最终你将会在Android Stud ...
- CodeForces-204E：Little Elephant and Strings （广义后缀自动机求出现次数）
The Little Elephant loves strings very much. He has an array a from n strings, consisting of lowerca ...
- bzoj1566 [NOI2009]管道取珠——DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1566 一眼看上去很懵... 但是答案可以转化成有两个人在同时取珠子,他们取出来一样的方案数: ...