用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"> ...
随机推荐
- table index & delete array item
table index & delete array item https://www.iviewui.com/components/table#ZDYLMB 编辑 row = { " ...
- Maven自动部署jar包到Neuxs
1. 修改maven配置(setting.xml) 添加neuxs的用户名和密码: <server> <id>my-deploy-release</id> &l ...
- Apache ab 单测 分布式
使用synchronized 处理并发 缺点:无法做到细粒度控制 只适合单点的情况 使用Redis作为分布式锁 setnx命令 设计模式 :使用 !setnx 加锁 getset命令
- Clover file list
/Volumes/EFI//EFI: total 4 drwxrwxrwx 1 jianweiliu staff 512 Apr 20 12:17 APPLE drwxrwxrwx@ 1 jianwe ...
- git指令详解总结
Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Gi ...
- Using MongoDB with Web API and ASP.NET Core
MongoDB is a NoSQL document-oriented database that allows you to define JSON based documents which a ...
- No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK问题解决
Maven构建项目报错: 解决办法: 1.eclipse菜单 - Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE ho ...
- 前端bug记录
记录一下前端入门时期遇到的一些bug. 1.同步.异步问题 背景:Javascript语言的执行环境是单线程.即一次只能完成一个任务.若有多个任务则需排队逐个执行——前一个任务完成,再执行后一个任务. ...
- BZOJ4003[JLOI2015]城池攻占——可并堆
题目描述 小铭铭最近获得了一副新的桌游,游戏中需要用 m 个骑士攻占 n 个城池. 这 n 个城池用 1 到 n 的整数表示.除 1 号城池外,城池 i 会受到另一座城池 fi 的管辖, 其中 fi ...
- POJ1442-查询第K大-Treap模板题
模板题,以后要学splay,大概看一下treap就好了. #include <cstdio> #include <algorithm> #include <cstring ...