前言:记得以前处理移动端横向滑动展示都是去用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巧妙实现移动端横向滑动展示功能的更多相关文章

  1. 【css】用css巧妙实现移动端横向滑动展示功能

    前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...

  2. 纯css实现移动端横向滑动列表

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  3. 纯css实现移动端横向滑动列表(可应用于ionic3移动app开发)

    前几天在公司做开发的时候碰到一个列表横向滑动的功能,当时用了iscroll做,结果导致手指触到列表的范围内竖向滑动屏幕滑动不了的问题. 这个问题不知道iscroll本身能不能解决,当时选择了换一种方式 ...

  4. 纯css实现移动端横向滑动列表&amp;&amp;overflow:atuo;隐藏滚动条

    <!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type=" ...

  5. CSS实现移动端横向滑动

    html: <div class="chosen-container"> <div class="chosen-swiper"> < ...

  6. CSS+HTML实现移动端div左右滑动展示

    由于手机屏幕的宽度有限,内容太多移动设备一行装不下的,所以很多移动端网站的导航栏都有左右滑动效果,下面我就用CSS+HTML实现移动端div左右滑动展示. CSS:box设置文本不换行,子元素box1 ...

  7. 实现移动端touch事件的横向滑动列表效果

    要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). ...

  8. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  9. overflow-x: scroll;横向滑动详细讲解

    overflow-x: scroll;横向滑动(移动端使用详解) css3 , ie8以上 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. clipboard_monitor_in_win7

    添加监听 AddClipboardFormatListener(this.Handle); 移除 RemoveClipboardFormatListener(this.Handle); #region ...

  2. runtime MethodSwizzle 实践之 奇怪crash : [UIKeyboardLayoutStar release]: message sent to deallocated instance

    情景: 使用MethodSwizzle 实现对数组.字典 等系统方法的安全校验.显然能达到预期效果,但实际发现当 键盘显示的情况下  home app 进入后台,再单击app  图标 切换回前台时 发 ...

  3. app之间的互相跳转

    第一次写博客,给大家带来的是:iOS开发中不同app之间的跳转,相信很多人也有用过友盟的SDK或者其他的第三方的分享工具,原理都是一样的. 跳转的实现分为四步: 第一步:建立两个工程,模仿两个App的 ...

  4. HDU 4279 - Number

    2012年天津赛区网赛的题目,想了好久,也没能想出来 还是小杰思路敏捷,给我讲解了一番,才让我把这个题做出来 f(x)=x-phi(x)(1——x与x互素个数)-g(x)(x的因子个数)+1 其中g( ...

  5. angularjs开发常见问题-1(持续更新中...)

    angularJs中学习中- 1.刷新当前页面数据:$state.reload service.create(data).then(function (newItem) { flash.success ...

  6. QTP自传之对象

    对象在手,测试我有 大家别误会,这里说的对象可不是值指男女朋友,而是对被测控件的识别.经过昨天的录制,大家一定很奇怪为什么我可以做到精确的回放操作,这都要归功于对象,下面就隆重的介绍我在对象识别方面的 ...

  7. YII框架路由和URL生成

    路由和URL生成 当一个YII应用开始处理一个请求的时候,它首先要做的便是将请求的URL转化成一个路由.路由的作用是用于后续实例化相应的控制器和操作,以便处理请求,整个处理过程便叫做路由.路由的逆过程 ...

  8. Xenu-web开发死链接检測工具应用

    Xenu 是一款深受业界好评,并被广泛使用的死链接检測工具. 时常检測站点并排除死链接,对站点的SEO 很重要,由于大量死链接存在会减少用户和搜索引擎对站点的信任,web程序开发者还可通过其找到死链接 ...

  9. 认识Underscore

    Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.它弥补了部分jQuery没有实现的功能,同时又是Backbone.j ...

  10. PAT L2-014 列车调度

    https://pintia.cn/problem-sets/994805046380707840/problems/994805063166312448 火车站的列车调度铁轨的结构如下图所示. 两端 ...