【CSS】之 (微信页面)表格或图片超出可来回滑动,标题保持不动
2017-09-01 15:23
615 查看
“> 背景:
(1)在微信页面(或移动端)
(2)表格 或 图片 超出屏幕宽度
需求:
(1)超出的表格或图片可左右滑动查看
(2)滑动时,标题保持不变
起先用position 这个属性 的 fixed,不行,导致样式乱了。
所以使用position:relative 和 js ,
js:就是当滚轴滑动时,触发事件,修改样式 left
(1)在微信页面(或移动端)
(2)表格 或 图片 超出屏幕宽度
需求:
(1)超出的表格或图片可左右滑动查看
(2)滑动时,标题保持不变
示例:
使用CSS (完美解决)
style="overflow-x: auto;"
例如,在要显示的内容中 添加。
使用js (滑动不平稳)
我初始想的:起先用position 这个属性 的 fixed,不行,导致样式乱了。
所以使用position:relative 和 js ,
js:就是当滚轴滑动时,触发事件,修改样式 left
window.onscroll = function() { $("#d_page_title").css("left", $(document).scrollLeft()); }
相关文章推荐
- table表格布局,表头固定不动,表身超出可滑动
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
- 微信页面 config注入获取权限 自定义微信分享的图片链接及标题
- Axure RP Pro - 相关问题 - 让规格文档中的页面图片和标题保持在同一页
- css遮罩层上面的弹框里面的内容可以滑动,外面的页面不可以滑动保持之前滑动的位置不变
- CollectionView嵌套TableView。页面滑动指向不同的标题
- 如何控制微信分享网页时,展示的标题,描述和图片
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
- css实现图片滑动效果
- ViewPager可滑动页面+PagerTitleStrip标题
- 适应移动端 iPhone & Android 微信页面的一些css属性
- 减少HTTP请求来加快页面响应速度的三种做法,CSS Sprites|内联图片|合并脚本和CSS
- 微信端页面 纯css让文本只显示两行
- CSS 实现表格内容超出显示省略号
- 关于 基于maven创建的项目jsp页面无法加载css、js、图片的问题
- android-左右滑动页面设计-仿微信滑动引导页面
- 用div css li 来做表格,超过自动换行。做图片系统时必用
- 解决/WEB-INF目录下的jsp页面引入webRoot下的Js、css和图片的问题
- css 超出用省略号当标题字符溢出用省略号表示
- 仿微信点击图片放大,并可滑动浏览效果