最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码上

vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 或者给不需要滚动的部分加上overflow:hidden属性解决

<div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #0066CC; padding: 3px; text-align: center; background: #ffffff;width:132px;">   34344135465465  </div> -------------------------解决ie6不支持position:

解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. 可是,touchend事件在页面滚动时有个问题.在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作. 解决方法 解决方法非常easy.就是在页面滚动时停止touchend事件冒泡.这样就能够防止触发touchend事件. 用法

特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout 移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子

1.获取屏幕宽度,并赋值给view <view class="ships-img" style="height:{{windowWidth}}px;"></view> wx.getSystemInfo({ success: function (res) { // console.log(res.windowWidth) 屏幕宽度 that.setData({ windowWidth: res.windowWidth }) } }) 2.最近遇

在之前做的一个demo中,有个视图是内滚动的,里边有个bar用了fixed,不是fixed在最外层视图的顶部和底部,在微信/safari/chrome/其他浏览器app上都没出现问题. 然后今天,我把demo放在拉勾网的简历的一个链接中,在拉勾网app里面点开,发现一个问题: 上下滚动的时候,设置了position:fixed的元素,在ios的-webkit-overflow-scrolling:touch机制下,产生了fixed的元素跟随内容一起滚动的问题. 此时fixed元素的表现就和pos

转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed 和 scroll 问题 译文作者:鎏金圣手火麒麟 最近在做iOS端的H5页面时,遇到了一个定位问题: 1.position: fixed 元素在页面滚动时属性值变为absolute,在页面停止滚动瞬间,才恢复fixed: 2.当使用 fixed 定位的元素,存在于进行滚动的容器元素内时,拖动容器元素会使出现

CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, 比如用onstouchstart和ontouchend已经 ontouchmove来实现点击, 这样代码会多写很多, 不如一个onclick来的直接, 也有用库来解决的, 比如zepto.js, 来书写点击事件, 但是就为了一个点击事件, 要引入一个库, 代价还是有点大的 CSS3为了解决这个难题,

select{ -webkit-overflow-scrolling: touch;/*解决移动端滑动卡顿问题*/ -webkit-transform: translateZ(0px);/*开启GPU加速*/ } /* -webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果,它可以设置成auto和touch auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和jwplayer,由于ckplayer是国内大牛开发的,中文文档比较官方,而且主要是文档说可以禁用拖动,就直接使用了ckplayer,没有测试jwplayer,待日后有时间再学习~~ ckplayer的使用文档见官方网站:http://www.ckplayer.com ,当前CKplayer.js版

参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要点击馅饼获得.游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应. 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了.才发现是因为点击

(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { "upBtn":".up", //被点击返回顶部的按钮 "downBtn":".down", //被点击返回底部的按钮 "inTms":300, //此功能元素出现的时间 "outTms":300,

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个物理像素使用,即使用 2x2 个像素显示原来 1 个物理像素显示的内容,从而让 UI 显示更精致清晰,这 2x2 个像素叫做逻辑像素.像这种像素比(像素比(即dpr)＝ 物理像素 / 逻辑像素)

为什么要使用fastclick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,才有了fastclick. fastclick的使用 fastclick的使用非常简单 ①npm安装 npm install fastclick ②将fastclick依附到body上 // main.js import FastClick from 'fastclick' // 解决移动端300ms的延迟 FastClick.

在做移动端项目的时候发现,如果弹窗的内容很多很长,在滑动弹窗时,蒙层下面的window窗体也会跟着一起滚动,这样带来很差的视觉体验:当时也想了很多办法,比如判断滑动的元素,如果是弹窗里面的元素则禁止window的滚动,如果不是,则window可以滚动 虽然在滑动弹窗的时候window体不滚动,但是当滑到弹窗边缘的时候,window体依然滚动,后来小组长想出了一个办法 即:在弹出弹窗的时候,设置window最外层定位为fixed,这样window便不会滚动了,在关闭弹窗的时候,设置window体定

在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; top:; right:; left:; margin: 0 auto; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index:; } .fixedDiv .fixedContent { max-width:

[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的时候:两位大侠瞬间发生剧烈的化学反应,出现各种奇葩问题,见下图: [结论]输入框position属性值不是fixed,而变成了absolute [出现情况]当我们唤起键盘的时候,输入框位置不再页面最下面,或者说页面当时还可以继续往下滚动,再或者页面没有滚动到最下边,这个时候就会出现上面的问题 [学习

前言 最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个都滑动不了 所以我在点击出现弹窗的时候在body加了以下css让它没有滚动效果 $("body").css({ overflow:"hidden", height:"100%" }); 但是这样又出来一个问题,会在弹窗出来的时候body直接回到顶部,显然不是我愿意要的,所以这时候就需要让body显示在之前的高度,所以我们可

一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为0,或者某一个固定值(例如:200px) 固定在底部的话就将bottom设置为0.或者固定值. 实际情况下,当导航栏滑动的时候,在该模块的位置可能会出现抖动情况. 二.解决抖动 在将其position:fixed的同事设置内部元素position:absolute; <div id="foot