前言：记得以前处理移动端横向滑动展示都是去用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实现移动端横向滑动列表&&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. JQ 动态修改/替换某个节点的内容

     <div class="box">我们定位于中国心理行业第一<div> $(".box").html($(".box&quo ...

  2. SSM+shiro，所有配置文件，详细注释版，自用

    spring配置文件applicationContext.xml,放在resources下 <?xml version="1.0" encoding="UTF-8& ...

  3. 错误模块名称: KERNELBASE.dll错误

    今天在部署一个C/S程序的时候出了bug,日志都没有记载:本地调试当然是没问题的,所以不是代码问题,百度之发现KERNELBASE.dll这个文章说的比较靠谱,仔细研究了自己的配置文件后,果然是配置文 ...

  4. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

  5. PHP通过循环给数组赋值

    $userDatas = [ ['user_id'=>1], ['user_id'=>3] ]; $userIds = []; foreach ($userDatas as $item){ ...

  6. Vue数组更新及过滤排序

    前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会 ...

  7. 思路 一般创建展示类时候 例如page类 会在网页上新增多个对应字段的隐藏域 用于存储值

    思路 一般创建展示类时候 例如page类 会在网页上新增多个对应字段的隐藏域 用于存储值

  8. jsp大学课程hi实验：分页在线测评(session的使用)

    project_1_updata_1_1.jsp <%@ page contentType="text/html;charset=utf-8" language=" ...

  9. thymeleaf中的判断总结

    判断String字符串,添加引号 th:class="${flag=='forum.html'}?'active'" 判断boolean类型,注意不能当成字符串处理,不能添加引号 ...

  10. git errot

    常用 git 基础命令 1.错误信息 使用TortoiseGit执行pull命令时显示 git.exe pull --progress --no-rebase -v "origin" ...