<!DOCTYPE html>

<html>

<head>

<title>纯css实现左右滑动</title>

<style type="text/css">

ul,li{

list-style: none;;

}

.slide-box{

margin-top:200px;

display: -webkit-box;

overflow-x: auto;

/*适应苹果*/

-webkit-overflow-scrolling:touch;

}

.slide-item{

width: 300px;

height: 300px;

border:1px solid #ccc;

margin-right: 30px;

background: pink;

}

/*隐藏掉滚动条*/

.slide-box::-webkit-scrollbar {

display: none;

}

</style>

</head>

<body>

<ul class="slide-box">

<li class="slide-item"></li>

<li class="slide-item"></li>

<li class="slide-item"></li>

<li class="slide-item"></li>

<li class="slide-item"></li>

</ul>

</body>

</html>

移动端左右滑动问题-html与css解决的更多相关文章

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

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

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

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

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

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

  4. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  5. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

  6. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

  7. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  8. 移动端touch滑动事件监听

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

随机推荐

  1. SVN的安装与配置

    单独安装 SVN:1.安装:yum -y install subversionmkdir -p /data/svn/ 创建创库目录svnadmin create /data/svn/repos 构建版 ...

  2. Docker 查看镜像信息

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 资深架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 文章首发个人网站: https://ww ...

  3. 与其争论java和.net的差别，还不如多想点用编程技术挣钱的方式

    年前和最近,我发现在博客园和其它地方,有不少争论java和.net哪个好的文章,其实这是种好现象.虽然到了架构层面,技术是通用的,但兼听则明,而且技多不压身,多种挣钱的方式总不会错. 本人最近主攻Ja ...

  4. 设计一个可拔插的 IOC 容器

    前言 磨了许久,借助最近的一次通宵上线 cicada 终于更新了 v2.0.0 版本. 之所以大的版本号变为 2,确实是向下不兼容了:主要表现为: 修复了几个反馈的 bug. 灵活的路由方式. 可拔插 ...

  5. .NET Core微服务之基于Steeltoe使用Spring Cloud Config统一管理配置

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 =>  Steeltoe目录快速导航: 1. 基于Steeltoe使用Spring Cloud Eureka 2. 基于Steelt ...

  6. Devexpress 常用的功能

    一 .GridControl的删除操作 private void rILinkEditInfoDel_Click(object sender, EventArgs e) { if (XtraMessa ...

  7. .netcore 模块积累

    最全的 demo https://github.com/XiaoFaye/netcore-samples http://files.cnblogs.com/files/kellynic/practic ...

  8. 强化学习（八）价值函数的近似表示与Deep Q-Learning

    在强化学习系列的前七篇里,我们主要讨论的都是规模比较小的强化学习问题求解算法.今天开始我们步入深度强化学习.这一篇关注于价值函数的近似表示和Deep Q-Learning算法. Deep Q-Lear ...

  9. Hexo优化 | 创建sitemap站点地图并向Google提交

    前言 站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎.Sitemap 可方便管理员通知搜索引擎他们网站上有哪些可供抓取的网页.搜索引擎 ...

  10. 【带着canvas去流浪（5）】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...