position:fixed与可scroll的列表,跳转之后再返回底部div先浮在上面,再恢复正常
2017-12-22 11:14
274 查看
在开发中,遇到这样一个问题。一个页面中有list列表,可滑动,浏览器底部使用position:fixed;bottom:0;固定了一个按钮。
但是当列表向下滚动之后,跳到下个页面又返回,底部的组件会有短暂的先在上面,之后又恢复到正常浏览器底部。
正常红框内容是在底部的。
其实原因也很简单,只是出现了这种闪一下就恢复的问题,一时没了头绪。
关键就是,需要把滚动区域的高度固定,且不能是100%,给底部组件留足够的高度。
但是当列表向下滚动之后,跳到下个页面又返回,底部的组件会有短暂的先在上面,之后又恢复到正常浏览器底部。
正常红框内容是在底部的。
其实原因也很简单,只是出现了这种闪一下就恢复的问题,一时没了头绪。
关键就是,需要把滚动区域的高度固定,且不能是100%,给底部组件留足够的高度。
.list { padding: 0 rem(15) rem(150) rem(15);//加下padding显示更好 -webkit-overflow-scrolling: touch; height: 60%;//高度调为小于100% overflow: scroll; }
.bottom{ height:45%;//高度按自己需求调整 position: fixed; bottom:0; }
相关文章推荐
- React-Redux 恢复列表页跳转明细页之后返回列表状态
- position:fixed和scroll实现div浮动【示例】
- position:fixed和scroll实现div浮动【示例】
- "把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部。 这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题。但问题是当浏览
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
- ios点击推送信息跳转Controller之后返回首页controller tabbar 不隐藏的bug
- 如何让UIView中的Button点击之后跳转到另一个ViewController上去,ViewController上也有一个按钮 可以返回
- div position:fixed后,水平居中的问题
- position:fixed div居中
- ASP.NET中,页面刷新后跳转到刷新前的位置 MaintainScrollPositionOnPostback属性的使用
- 解决JS在alert之后window.location.href跳转无法正常执行
- position设置为fixed的div在手机浏览器上异常的解决办法
- iphone下元素放在了一个position: fixed的div中无法点击
- 让footer div位于网页 页面 底部css3 position:fixed
- 当div属性有 position: fixed 属性时,flash文件显示在最顶层遮挡div层级解决方法
- CSS中position属性之fixed实现div居中
- 一个position为fixed的div,宽高自适应,怎样让它水平垂直都在窗口居中?
- jquery返回顶部和底部插件和解决ie6下fixed插件
- 判断div滑动到底部的scroll实例代码
- a标签点击跳转之后返回url多了#以及相关问题