在safari中，使用动画的jQuery滚动顶端不能正常工作 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

放在手机上显示，倒也能正常显示不出现滚动条，不过是移动设备对页面做了缩小优化，所以字体等都相应缩小了（980px是相对于手机像素的，我的是超过1000px多一些就出现滚动条了，这个没具体研究）。..."> IOS中Safari顶端状态条样式忽略将数字变为电话号码 ...） -webkit-tap-highlight-color:rgba(0,0,0,0); 7.在移动端做动画效果的话，如果通过改变绝对定位的 top，或者 margin的话做出来的效果很差，很不流畅，而使用...`，具体请看[这里][5] 3.有些版本的 iphone4中， audio和 video默认播放事件不会触发，比如使用 window.onload或计时器等都不能触发播放，必须用 JS写事件让用户手动点击触发才会开始播放...jpeg,image/gif" ，同时在 android上默认不能使用相机，可以加 capture="camera" 同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用

4.2K4 0

jQuery实现图片懒加载

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把正真的路径存在元素的自定义属性“data-src”（这个名字起个自己认识好记的就行）里，要用的时候就取出来，把它的值赋值给img的src....height();//整个网页的高度 $(window).height();//浏览器可视窗口的高度 $(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）...在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。...;//IE9+、Chrome、Firefox、Opera 以及 Safari 网页正文全文宽(不包括滚动轴的宽度)： document.body.scrollWidth 网页正文全文高：document.body.scrollHeight...下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 lazyRender，若在300毫秒内再次滚动则清除原来的定时器 if(clock){

15.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

记录工作中遇到的各种问题（Bug，总结，记录）

在离开当前页面时判断是否有更改，做出提示新版本浏览器基于安全机制，不能设置提示的样式，也不能设置提示中操作（确认和取消）的回调，也不能设置提示的文案（旧版的可以设置文案） ? ?...移动端动画 -webkit-animation-play-state:paused; 暂停状态在Safari浏览器中失效在H5中播放音乐时，时常会用到播放时旋转，点击暂停，再点击就继续播放 ?...；在iPhone下一开始paused属性有效，但当动画动起来之后，再使用paused就会失效这是safari浏览器的bug,解决办法有三个： 1....，页面滚动到底部（有滚动条），点击select，input, textarea等相关项时，会自动滚动到页面顶部在chrome60中还是正常的，一升级就出现问题了目前还不知道为何，可能是chrome61...在React中使用第三方插件（比如jQuery）来更新DOM树结构时，会出现类似这种错误。

19.8K1 2

【第3期】前端常用插件、工具类库汇总

与上一个不同的是，不能通过添加url参数远程调试客户端。...Underscore：https://underscorejs.org/ Underscore提供了一套完善的函数式编程的接口，让我们更方便地在JavaScript中实现函数式编程。...二维码 jQuery qrcode：https://github.com/jeromeetienne/jquery-qrcode 是一个能够在客户端生成矩阵二维码的jQuery插件，使用它可以很方便的在页面上生成二维码...另外据官网说，它比Handlebars在移动端Safari中快2-3倍。入门文章可以看template7入门教程及对它的一些看法。...简单了解Easy Mock使用方法，可以参考如何使用Easy Mock，直接看文章中给出的视频连接即可。

5.2K1 0

前端面试那些坑

简述一下你对HTML语义化的理解？ HTML5的离线储存怎么使用，工作原理能不能解释一下？浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？...absolute的containing block计算方式跟正常流有什么不同？ CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？...(携程) overflow: scroll时不能平滑滚动的问题怎么处理？有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。...怎么实例化这个类 JavaScript中的作用域与变量声明提升？如何编写高性能的Javascript？那些操作会造成内存泄漏？ JQuery的源码看过吗？能不能简单概况一下它的实现原理？...jquery 中如何将数组转化为json字符串，然后再转化回来？ jQuery和Zepto的区别？各自的使用场景？针对 jQuery 的优化方法？ Zepto的点透问题如何解决？

2.9K6 0

移动web开发需要注意的二十点

的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码（部分设备可能支持不是很好）； 2、HTML5标签的使用在开始编写webapp...时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉...为达到适配各种手持设备，建议前端工程师使用自适应布局模式，因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，...至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？

2.9K2 0

hexo-theme-yun 制作笔记

（谁说没人看的博客就不能有预告了！？）名字的由来起初打算叫做 Starry，向往星空的美丽，在咕咕咕的期间发现已经有人做了这个名字的主题，遂改名为 Yun。...决定使用 medium-zoom 替代，并全部使用 Vanilla JavaScript，以移除 jQuery。...medium-zoom 干脆也别用了，大家都会右键的_(:з」∠)_ jQuery 的确用起来很爽，但这位老前辈已经将它的理念逐渐融入现代浏览器的标准 API 中（譬如 querySelector、classList.add...（Safari 最为明显）目前通过切回 ::before 实现和移除 background-attachment: fixed 来优化，即便开启滤镜仍然滚动流畅。...使用 CSS3 will-change 提高页面滚动、动画等渲染性能继续做减法，移除默认不开启的 rymd（群星移动效果），挺吃性能，而且也没怎么优化页面展示效果。

1.3K2 0

前端工程师面试题汇总

简述一下你对HTML语义化的理解？ HTML5的离线储存怎么使用，工作原理能不能解释一下？浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？...absolute的containing block计算方式跟正常流有什么不同？ CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？...(携程) overflow: scroll时不能平滑滚动的问题怎么处理？有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。...怎么实例化这个类 JavaScript中的作用域与变量声明提升？如何编写高性能的Javascript？那些操作会造成内存泄漏？ JQuery的源码看过吗？能不能简单概况一下它的实现原理？...jquery 中如何将数组转化为json字符串，然后再转化回来？ jQuery和Zepto的区别？各自的使用场景？针对 jQuery 的优化方法？ Zepto的点透问题如何解决？

2.7K8 0

移动端H5坑位指南

* { -webkit-tap-highlight-color: transparent; } 复制代码禁止动画闪屏在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...在前端领域里最早解决点击穿透是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。...首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止的滚动行为却引发其他问题。.../衔接而不能使用-衔接。

4.3K1 0

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

* { -webkit-tap-highlight-color: transparent; } 禁止动画闪屏在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3D环境就能让动画稳定运行了...2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。...在前端领域里最早解决点击穿透是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。...首先明确解决滑动穿透需保持哪些交互行为，那就是除了弹窗内容能点击或滚动，其他内容都不能点击或滚动。目前很多解决方案都无法做到这一点，全部解决方案都能禁止的滚动行为却引发其他问题。.../衔接而不能使用-衔接。

5K2 2

Toastr 通知提示插件

所以一般通过自定义提示框来实现弹窗提示信息，而jquery toastr正是为此的一款非常棒的插件。...开发中用angular比较多，所以笔记记录了angular一些常见使用，与jquery版本有些许不同，相差不大。.../static/toastr/toastr.min.js"> 注意：导入toastr.min.js文件欠必须要先导入jQuery原生文件在angular模版中注入依赖 angular.module...('app', ['ngAnimate', 'toastr']) toastr使用中会用到动画，所以需加上ngAnimate，如果不引入ngAnimate，没有动画效果，不影响显示。...显示时的动画方式 fadeIn hideMethod 消失时的动画方式 fadeOut positionClass toast-top-left 顶端左边 toast-top-right

3.7K9 0

前端开发，关键技术点杂烩

减少对 DOM 的直接操作，减少页面重绘，使用 H5 新方法 requestAnimationFrame 来进行 DOM 动画，使用 createElement 代替 innerHTML 进行 DOM...标准属性在后； 9、CSS 预处理 CSS 预处理器用一种专门的编程语言，在编写 CSS 的过程中可以使用变量、循环、递归等特性，然后再编译成正常的 CSS 文件，可以提高 CSS 编写效率，常用的预编译语言有...操作 Attribute 时使用 setAttribute() 和 getAttribute() 来操作，由于 getAttribute() 可能会有浏览器兼容性问题，所以在 jQuery 中，会对该方法进行测试...，声明函数在全局作用域，此时作用域链只有一个环境对象；运行函数时作用域链顶端加入了函数内的环境对象，运行完毕时顶端环境对象被销毁，以此类推。...JS 在查找变量时会从链的顶端（就近原则）一直向下查找。如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。

1.5K3 0

前端关键技术点杂烩，这些你必须知道

减少对 DOM 的直接操作，减少页面重绘，使用 H5 新方法 requestAnimationFrame 来进行 DOM 动画，使用 createElement 代替 innerHTML 进行 DOM...标准属性在后； 9、CSS 预处理 CSS 预处理器用一种专门的编程语言，在编写 CSS 的过程中可以使用变量、循环、递归等特性，然后再编译成正常的 CSS 文件，可以提高 CSS 编写效率，常用的预编译语言有...操作 Attribute 时使用 setAttribute() 和 getAttribute() 来操作，由于 getAttribute() 可能会有浏览器兼容性问题，所以在 jQuery 中，会对该方法进行测试...，声明函数在全局作用域，此时作用域链只有一个环境对象；运行函数时作用域链顶端加入了函数内的环境对象，运行完毕时顶端环境对象被销毁，以此类推。...JS 在查找变量时会从链的顶端（就近原则）一直向下查找。如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。

1.9K2 0

能用CSS实现的就不用麻烦JavaScript

平滑滚动曾经有一段时间，我们不得不依靠JavaScript的window.scrollY来实现来执行此操作，如果想平滑滚动还要依赖定时器增加一个动画。...从某种意义上说，它与Flexbox或CSS Grid的工作原理类似，即您需要一个容器元素，在该容器元素上设置scrolln-snap-type和多个为其设置了scroll-snap-align的子元素，...曾经某个时期，大多数开发者使用 JavaScript(或者jQuery) 给浏览器中的元素添加动画。...他们需要更好的工具去开发复杂的动画序列并获得最好的性能。JavaScript(或者jQuery) 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。最被广泛接受的方案是使用 CSS 动画。... menu在正常态下是隐藏的： .menu{ display: none; } 而当导航hover时显示： ```js /*使用相邻选择器和hover

1.9K1 1

聊一聊跨浏览器测试验证点梳理

事件处理（点击、悬停、滚动、键盘事件等）是否在所有浏览器中响应一致？动画和过渡效果是否流畅且符合预期？是否有卡顿或不渲染？单页应用的路由切换是否正常？...LocalStorage 和 SessionStorage 功能是否正常工作？用户登录状态、购物车内容等依赖存储的功能是否在浏览器会话间或重启后保持正确？...运行时性能页面滚动、复杂交互（如大型列表、复杂动画）是否流畅？有无明显卡顿或延迟？内存使用是否异常？是否存在内存泄漏（长时间使用后浏览器变慢或崩溃）？...内置的密码管理器是否工作正常？浏览器缩放功能（Ctrl+滚轮/Cmd+滚轮）是否导致布局错乱？...第三方库/插件使用的JavaScript库（jQuery, React, Vue, Angular等）和版本是否与目标浏览器兼容？使用的插件或Polyfill是否在所有目标环境中有效工作？

6742 0

06-移动端开发教程-fullpage框架

2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...文件，jQuery，如果设置了options中css3: false*，如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话，需要添加 jQuery UI library...在初始化全屏插件的时候，有很多设置项。...，移动端尽量不要使用大量动画。...配合fullpage的onLeave事件，可以实现在上一屏离开的时候，给下一屏添加动画样式类，并把上一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。

6.4K5 0

06-移动端开发教程-fullpage框架

2. fullpage.js的使用 2.1 兼容性 fullpage.js是jQuery的插件，需要依赖jQuery，要求jQuery最低的版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...文件，jQuery，如果设置了options中css3: false*，如果你用除了jQuery的默认linear 和swing缓动的效果之外的缓动效果的话，需要添加 jQuery UI library...在初始化全屏插件的时候，有很多设置项。...，移动端尽量不要使用大量动画。...配合fullpage的onLeave事件，可以实现在上一屏离开的时候，给下一屏添加动画样式类，并把上一屏的动画样式类去掉。动画样式类可以提前记录在一个数组中或者是放到动画元素的自定义属性中。

6.6K9 0

移动开发实用

-- ios7.0版本以后，safari上已看不到效果 --> 将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式在IOS safari下，大概为300毫秒。这就是延迟的由来。...个在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍那么，前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的...，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下， <!...{display: none} android 2.3 bug @-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉 after和before伪类无法使用动画 border-radius

8.4K3 0

微信 H5 页面兼容性解决方案

出现原因分析：笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常问题详情描述： ios当前页面分享给好友，...点击进来是正常，如果二次分享，则跳转到首页；使用vue router跳转到第二个页面后在分享时，分享设置失败；以上安卓分享都是正常 ?

4.1K3 0

html左侧浮动广告代码,jQuery 浮动广告实现代码

样式中的top属性, 注意要是小写，要符合“标准” $(“#qqonline”).text(bodyTop); // 设置层的内容，这里只是显示当前的scrollTop $(“#qqonline1”)....jquery,学了点皮毛,为了满足boss的需求弄了个相对屏幕静止的浮动层,把代码记在这里,以防自己以后用到下面是jquery代码,需要jquery类库的支持才能运行,我写文章的时候jquery的版本是...= $(window).scrollTop();//页面现在的位置和滚动条顶端的距离[scrollTop()] var diffH = $(window).height()/4;//设计者期望的浮动栏与浏览器顶端的距离...[height()],这里是与浏览器顶端保持1/4个页面的高度,如果diffH的值设置成0,浮动栏就会落在屏幕顶端 var percent=diffY+diffH; //percent将被赋值给css中的...”,v);//percent被赋值给top属性,浏览器根据这个值动态的调整浮动栏的高度,如果按照上面给的代码,这个高度将正好让浮动栏一直保持在屏幕中央 } }); / JS和HTML 的分割线 / 下面是

6.1K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭