H5实现横向滚动的方法总结
小程序中有横向滚动的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实现横向滚动的方法总结的更多相关文章
- 使 WPF 支持触摸板的横向滚动
微软终于开始学苹果一样好好做触摸板了(就是键盘空格键下面那一大块).然而鉴于以前没有好好做,以至于 WPF 程序甚至都没有对触摸板的横向滚动提供支持(竖向滚动是直接使用了 MouseWheel,汗-- ...
- web开发 小方法1-禁止横向滚动
最近学了学做了个公司的网站 总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...
- swiper3d横向滚动多张炫酷切换banner
最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...
- 【吉光片羽】js横向滚动与浮动导航
1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...
- Android简易实战教程--第四十六话《RecyclerView竖向和横向滚动》
Android5.X后,引入了RecyclerView,这个控件使用起来非常的方便,不但可以完成listView的效果,而且还可以实现ListView无法实现的效果.当然,在新能方便也做了大大的提高. ...
- 使用elementUI滚动条之横向滚动
用过elementUI组件应该会知道它内置一个滚动效果,官网对此组件没有相关文档,也是细心网友发现的. <el-scrollbar></el-scrollbar> 将会出现滚动 ...
- 解决iScroll横向滚动区域无法拉动页面的问题
近期项目中使用iScroll遇到一个问题,在设定wrapper为横向滚动时,如果你手指放在该区域,将无法拉动页面,也就是说该区域取消了默认事件.这个体验是实在是无法接受,特别是页面中有多个横向滚动区域 ...
- react-native 横向滚动的商品展示
在app中会有这种页面 像这样商品是横向的,而且要滚动,思路是利用 ScrollView 横向的滚动 思路: (a): 横向滚动的整体作为一个组件 ShopCenter {/*** 横向滚动 *** ...
- Android TextView 横向滚动(跑马灯效果)
Android TextView 中当文字比較多时希望它横向滚动显示,以下是一种亲測可行的方法. 效果图: 1.自己定义TextView,重写isFocused()方法返回true,让自己定义Text ...
随机推荐
- 封装:简要介绍自定义开发基于WPF的MVC框架
原文:封装:简要介绍自定义开发基于WPF的MVC框架 一.目的:在使用Asp.net Core时,深感MVC框架作为页面跳转数据处理的方便,但WPF中似乎没有现成的MVC框架,由此自定义开发一套MVC ...
- Django中一些常用的文档段落
1. Settings¶ STATIC_URL¶ MEDIA_ROOT¶ MEDIA_URL¶ AUTH_USER_MODEL¶ USE_I18N¶ USE_L10N¶ USE_TZ¶ (三者默 ...
- js/jquery键盘事件及keycode大全
js/jquery的键盘事件分为keypress.keydown和keyup事件 一.键盘事件 1.keydown()事件当按钮被按下时,发生 keydown 事件. 2.keypress()事件ke ...
- java。JDK的API,版本1.6.0中文版下载
转载自https://blog.csdn.net/xiao9469/article/details/87783561 链接: https://pan.baidu.com/s/1YqrbTD_msTmn ...
- Mysql之索引(六)
1.思考 在图书馆是怎么找到一本书的? 一般的应用系统对比数据库的读写比例在10:1左右(即有10次查询有1次写操作),而且插入操作和更新操作很少出现性能问题. 遇到最多,最复杂的还是一些复杂的查询操 ...
- VS 对话框控件的Tab顺序问题
我们先来直观的看看各个控件的Tab顺序吧.打开“Resource View”视图,然后在资源中找到对话框IDD_ADDITION_DIALOG,双击ID后中间客户区域出现其模板视图.在主菜单中选择“F ...
- Java 重写 super关键字
方法名.参数个数和参数类型都相同 举例 class A{ public void num() { System.out.println("A num"); } } class B ...
- react的事件处理为什么要bind this 改变this的指向?
react的事件处理会丢失this,所以需要绑定,为什么会丢失this? 首先来看摘自官方的一句话: You have to be careful about the meaning of this ...
- CSS 基础样式
文本 p{ font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Time ...
- spring中WebApplicationContext、DispatcherServlet与web容器的ServletContext关系梳理
学习源码过程中,对各种context(上下文)表示很懵逼.特地留此一篇. 1.要了解各个上下文之间的关系.首先走一遍spring在web容器(tomcat)中的启动过程 a) ServletConte ...