小程序中有横向滚动的swiper,H5中目前得手动实现。

实现方法如下:

外层需要设置:

overflow: scroll;white-space: nowrap;

内层需要设置:
display: inline-block; 
 <div class="noticeListBox">
<div class="noticeList" v-for="(item,index) in 10"> </div>
</div>
.noticeListBox {
width: 100%;
box-sizing: border-box;
overflow: scroll;
white-space: nowrap;
} .noticeListBox::-webkit-scrollbar {
display: none;
} .noticeList{
display: inline-block;
}

H5实现横向滚动的方法总结的更多相关文章

  1. 使 WPF 支持触摸板的横向滚动

    微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...

  2. web开发 小方法1-禁止横向滚动

    最近学了学做了个公司的网站  总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...

  3. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  4. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  5. Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》

    Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...

  6. 使用elementUI滚动条之横向滚动

    用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...

  7. 解决iScroll横向滚动区域无法拉动页面的问题

    近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...

  8. react-native 横向滚动的商品展示

    在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件  ShopCenter {/*** 横向滚动 *** ...

  9. Android TextView 横向滚动(跑马灯效果)

    Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...

随机推荐

  1. C++分治策略实现线性时间选择

    问题描述: 给定线性序集中n个元素和一个整数k,1≤k≤n,要求找出这n个元素中第k小的元素,即如果将这n个元素依其线性序排列时,排在第k个的元素即为要找到元素. 细节须知:(与之前的随笔相比) (1 ...

  2. Jenkins教程(四)安装BlueOcean与Maven构建

    前言 本文旨在使用BlueOcean实现构建可视化与使用Maven构建上一节Jenkins教程(三)添加凭据与流水线拉取Git代码拉下来的代码 什么是Blue Ocean Blue Ocean 重新思 ...

  3. - Git常用命令 基础 总结 MD

    目录 目录 Git常用命令 帮助 help 常用操作 初始化 clone init 提交 push 暂存 更新 撤销修改 分支 branch 查看分支 创建分支 切换分支 checkout 删除分支 ...

  4. 信安周报-第03周:DB系统表

    信安之路 第03周 前言 这周自主研究的任务如下: 任务附录的解释: 文件读写在通过数据库注入漏洞获取webshell的时候很有用 系统库和表存放了很多关键信息,在利用注入漏洞获取更多信息和权限的过程 ...

  5. Python列表(list)所有元素的同一操作

    针对很普遍的每个元素的操作会遍历每个元素进行操作. 这里给出了几种写法,列表每个元素自增等数学操作同理: 示例:整形列表ilist加1个数.元素类型转字符串: ilist = [1, 2, 3, 10 ...

  6. docker离线导入导出镜像

    docker save -o mysqlies.tar 5ada6380f248(镜像id)    # 镜像id是要导出的 有镜像的机器  在有镜像的机器上执行docker load --input ...

  7. 递归-求n和n以前的自然数

    #include <iostream> using namespace std; void zrs(int n)//用递归求自然数(n和它之前) { ) { cout<<< ...

  8. Vert.x(vertx)发送 HTTP/HTTPS请求

    Vert.x Web服务有两种协议,一种是HTTP,另外一种是使用ssl的HTTPS,请求的方式有五种,分别是get.post.put.delete.head.为了简单,服务端主要实现对HTTP协议的 ...

  9. Git 理解修改

    参考链接:https://www.liaoxuefeng.com/wiki/896043488029600/897884457270432 Git之所以比其他版本控制系统设计得优秀,就是因为Git跟踪 ...

  10. 【转载】C#使用InsertRange方法往ArrayList集合指定位置插入另一个集合

    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,ArrayList集合可存储多种数据类型的对象.在实际的开发过程中,我们可以使用InsertRange方法在ArrayList集合指 ...