移动端解决fixed滚动出现抖动的问题

2024-09-01

移动端fixed的元素抖动的问题

工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果: 在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器.UC浏览器.360浏览器(这几个是ios最容易出问题的浏览器): 问题:当用户快速滑动页面的到时候,fixed的元素就会在窗口跳动或者抖动,非常影响用户体验下面提供几个解决方案,仅供参考,如有更好更有效的解决办法,欢迎留言交流探讨! 方法一: 给body设置高度100% body,html

移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度,让文档高度等于窗体高度,并fixed需要定位的区域在最下方 (function bottonm(){ if($(document).height()<$(window).height()){ $('.bottom_fix').css({'position':'fixed','bottom':'0px

解决fixed在苹果手机抖动问题/头部底部固定布局

1.头部和底部固定,中间内容滚动,不涉及fixed 1)absolute与height:100% <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <t

移动端设置fixed布局的问题解决

最近写移动端,遇到一个问题就是用fixed属性布局的时候由于手机的原因会出现很多问题,比如说手机端底部固定一块,然后里面有输入框,(类似于手机QQ或者微信底部的输入框一样的布局)这个时候在调用软键盘的时候会出现软键盘遮挡输入框的情况,如图这是正常的情况下,下面是唤起软键盘的图片很明显挡住了一半的输入框,这个时候可以用以下方式解决(在这里要感谢叶小钗的博客,是从他那里学来的) 虚拟键盘导致fixed元素错位 fixed元素一定会伴随虚拟键盘的出现,但是虚拟键盘只是“贴”在了viewport上,

基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚.所以就去了zepto的官网查看其API,却发现如果要使用zepto的swipe()方法,需要引用其已经封装好的touch.js文件,我就赶紧引用了这个js文件,可在实际测试中,官网给出的touch.js文件

关于苹果手机微信端 position: fixed定位top导航栏问题

在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-sca

移动端web页面滚动不流畅，卡顿闪烁解决方案

移动端web页面滚动不流畅,卡顿闪烁解决方案 1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overflow-scrolling: touch 2.position属性导致的页面滚动不流畅问题: <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;"> <d

手机uc不支持伪元素使用animation动画；移动端background-attachment:fixed不兼容性

20170503 1.手机uc不支持伪元素使用animation动画 (暂未解决) 2.移动端background-attachment:fixed不兼容性,没有任何效果, element:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background:#444 url(../img/banner1.jpg) center center no-repeat;

ios系统和某些移动端background-attachment:fixed不兼容性

固定背景不动:background-attachment:fixed; ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下: ps:想在哪个标签加背景,可以在它class后:before. body:before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(

我是如何通过debug成功甩锅浏览器的：解决fixed定位元素，在页面滚动后touch事件失效问题

如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart 事件替代传统的 click 事件,这过程中我遇到了一些小问题,并成功解决了,你可以通过这篇文章查看具体的情况. 所谓祸不单行,在即将发布上线的时候,我又突然发现使用 touchstart 事件后,移动设备上出现了另一个比较诡异的现象:当用户滚动页面后,原本绑定在fixed定位的navbar元素上的

position:fixed 造成页面抖动解决办法

今天做项目遇到一个问题.鼠标滚动到指定长度后,理想状况是菜单吸附到顶部.但是实际上在一些页面上会造成抖动.定位之后发现.window.pageYoffset值会变成0 搜索一些资料后发现.因为fixed定位后,这个div 就已经脱离文档流了.window.pageYoffset指的是document元素距离视窗的距离.所以导致window.pageYoffset变成了0 解决办法: 假设我们把fixed定位的div为divA, 那么在divA下面再写一个占位的div B,它的高度和divA一致,

解决ie6 fixed 定位以及抖动问题

像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩放和滚动条的滚动而变化,那个肯定是想到的用position:fixed生成绝对定位,只要设置这个CSS属性就能达到刚刚的需求.当其他浏览器都正常显示的时候,只有IE6不那么完美.该元素的位置是通过"left", "top", "right

chrome下positon:fixed无效或抖动的解决办法

先来看一下我们要实现的效果我想这种效果大家都有实现过,或者说吸顶的效果和这差不多页面结构 js代码如下 /*吸顶*/ var $child = $("#child_3"); var $parent=$("#parent_3"); var w = $parent.width(); var tH = $child.offset().top; $(window).resize(function () {//响应 w = $parent.width(); $child.

js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现. 2.取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart.touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果. 缺点/不足:滑动起来略显卡顿,用户体验不好,有

解决fixed布局里内容不滚动问题

//注意给父级加上 (1)横向滚动 left:0; right:0; 然后想要横向滚动的话 overflow-x:scroll; overflow-y:hidden; (2)竖直方向滚动top:0;bottom:0;position:fixed;overflow-y:scroll;overflow-x:hidden;

【移动端】解决fixed定位闪动问题

经常我们会把导航按钮固定在页面的最底部位置,比如饿了么的首页但是导航栏在页面滚动的时候会不断的闪动,这样的用户体验非常不好,那么可以使用下面的CSS样式处理一下 transform: translateZ(0)

css 解决fixed 布局下不能滚动的问题

如果我们布局的是后是fixed并且想要高度为100%的时候,我们一般会这样设置: div { display:fixed; height:%; overflow:scroll; } 但是这样并不会出现滚动条,正确的做法应该设置top和bottom为0: .fixed-content { top: 0; bottom:0; position:fixed; overflow-y:scroll; overflow-x:hidden; }

移动端网页fixed布局问题解决方案

问题说明移动端web的footer常常设计为fixed布局,但是在页面键盘被拉起时fixed的布局会出现问题,自己试了下,在较低版本ios和部分安卓机上会有此问题.具体问题看图示: <body class="layout-fixed">  <main> <input type="text" placeholder="Footer..."/> <button c

在safari上，解决fixed失效问题

一个页面中有头部.底部和中间内容区域,底部固定在屏幕底端. 头部header 内容main 底部footer 方法一.在main上使用fixed定位,加上overflow-y属性. .main { position: fixed; top: 50px; bottom: 50px; overflow-y: scroll; } 不推荐这个fixed方案,因为页面偶尔卡住不动. 方法二.中间的main不设定位,高度100%,再padding头部和尾部, 其中头部和底部的定位设为absolute会比设为

IE6完美解决fixed方法

ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会闪烁. ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮动:以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并不会

移动端解决fixed滚动出现抖动的问题

热门专题