用css巧妙实现移动端横向滑动展示功能
前言：记得以前处理移动端横向滑动展示都是去用js去解决的，要用js进行蛮多处理，要算li的宽度，然后还要用js设置ul盒子的宽度，又要设置最大滑动距离，最小滑动距离等等.......但是现在发现用css就能很好的解决这功能。
一、直接上代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<title>test</title>
<style>
body,p { margin:0; padding:0;}
.concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }
.box { white-space:nowrap; overflow-x:auto; } /*注释1*/
.box::-webkit-scrollbar { width:0; height:0; display: none; } /*注释2*/
.box div { list-style:none; display:inline-block; width:100px; line-height:30px; margin-right:10px;
background:#ccc; text-align:center; } /*注释3*/
.box p { width:100%; height:50px; background:pink; }
.box div:last-child { margin:0; }
</style>
</head>
<body>
<div class="concent">
<div id="button1" class="box">
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">综合能力</button></div>
<div>
<button style="margin: 0px;" type="button" class="btn btn-sm btn-clor">新增获取能力</button></div>
</div>
</div>
<script>
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isUc = u.indexOf('UCBrowser') > -1; //uc浏览器
//var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid&&isUc){ /*注释5*/
$('.box').on('touchstart',function(){
$(document).on('touchmove',function(e){
e.preventDefault();
});
$(document).on('touchend',function(){
$(document).unbind();
});
});
}
</script>
</body>
</html>
用css巧妙实现移动端横向滑动展示功能的更多相关文章
- 【css】用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- 纯css实现移动端横向滑动列表
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)
前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...
- 纯css实现移动端横向滑动列表&&overflow:atuo;隐藏滚动条
<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...
- CSS实现移动端横向滑动
html: <div class="chosen-container"> <div class="chosen-swiper"> < ...
- CSS+HTML实现移动端div左右滑动展示
由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...
- 实现移动端touch事件的横向滑动列表效果
要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- overflow-x: scroll;横向滑动详细讲解
overflow-x: scroll;横向滑动(移动端使用详解) css3 , ie8以上 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- vs code配置
新版的用户设置不是代码, https://blog.csdn.net/zhaojia92/article/details/53862840 https://www.cnblogs.com/why-no ...
- 注解方式过滤器（Filter）不能过滤Servlet的问题
https://www.aliyun.com/jiaocheng/778495.html 今天写filter(过滤器)的时候,碰到一个奇怪的问题,发现filter可以过滤urlPatterns,但是无 ...
- jQuery 操作Cookie
一个轻量级的cookie 插件,可以读取.写入.删除 cookie. 下载地址:http://plugins.jquery.com/cookie/ (在实际中可以用这个保存cookie保存用户的习惯, ...
- FastJson、Jackson、Gson进行Java对象转换Json细节处理
前言 Java对象在转json的时候,如果对象里面有属性值为null的话,那么在json序列化的时候要不要序列出来呢?对比以下json转换方式 一.fastJson 1.fastJson在转换java ...
- 遍历map中的内容
Map<String, CartItem> cartItems = cart.getCartItems();for(Map.Entry<String, CartItem> en ...
- #191 sea（动态规划）
假设已经求出了i个点j个桥的连通图数量f[i][j],容易由此推出最终答案,套路地枚举1号点所在连通块大小即可. 假设已经求出了i个点的边双连通图数量h[i],考虑由此推出f[i][j].可以枚举其中 ...
- 【Gym - 100812G 】Short Path （SPFA）
BUPT2017 wintertraining(15) #7B 题意 n个点m条无向有权边(2 ≤ n ≤ 10^5, 1 ≤ m ≤ 10^5),每个点标记了0或1,求所有1中,最近的两个1的下标及 ...
- [luogu3878][TJOI2010]分金币【模拟退火】
题目描述 现在有n枚金币,它们可能会有不同的价值,现在要把它们分成两部分,要求这两部分金币数目之差不超过1,问这样分成的两部分金币的价值之差最小是多少? 分析 根据模拟退火的基本套路,先随机分两堆金币 ...
- HttpWebRequest发http参数
使用js发请求时,一般使用表单.json对象或者字符串 $.post(url,jsonStr) 服务端获取参数 Request.QueryString.Get();// GET参数 Request.F ...
- 压缩JS,CSS的工具
目标: 压缩项目中的JS,CSS文件. 方法一:使用uglifyjs uglifycss 压缩JS: 1.安装NODEJS.是一个在服务端运行的JS语言.下载地址https://nodejs.org/ ...