在Firefox上，Flutter Web滚轮以缓慢的步伐滚动 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

【技术圈】Flutter 1.12、Firefox 71、V8 8.0 一大把新特性来袭

Flutter 1.12 是 1.9.x 的版本在经历 6 次 hotfix 之后，才带来的 stable 大版本更新。该版本解决了 4571 个报错，合并了 1905 份 pr，同时本次发布也是 Flutter 一年内的第五个稳定版本。

05

随心所欲的滚动条，远离产品汪（二）

还记得上周咱们说的“随心所欲滚动条，远离产品汪”一文吗？当中介绍了自定义滚动条的基本原理与实现方法，在自定义滚动条实现后，可以通过对滚动条的上下拖动来控制内容区的显示，使用过的朋友会发现，如果对篇幅较长的内容来说，不停的拖动滚动条来查看内容，还是比较麻烦的，于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结原理结构图为了方便大家熟悉理解，希望大家能够回顾下上篇“随心所欲滚动条，远离产品汪（一）”，本文继续使用

08

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

是的

没有找到

jimojianghu

有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。

00

flutter入门简介

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序，并且兼容滚动行为、排版、图标等方面的差异。flutter的开发语言是Dart，如果您使用过Java或JavaScript之类的语言，则能够很快上手，甚至有一些Flutter应用是没有编程经验的人写的！在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

03

接上一篇事件详解

事件类型： DOM3级事件规定了以下几类事件；如下： UI事件：当用户与页面上的元素交互时触发； load事件：当页面加载完后(包括所有图像，所有javascript文件，css文件等外部资源)，就会触发window上面的load事件，如下代码是加载图片的： HTML代码： JS代码如下： var img = document.getElementById("img"); EventUtil.addHandler(img,'load',fu

06

Flutter web 最新进展: 发掘更多可能！

作者 / Mariam Hasnany, Product Manager, Flutter

04

Flutter Web在美团外卖的实践

在多形态业务场景下，如何保障多端体验的一致性，是前端技术领域一个比较受关注的方向。美团外卖前端技术团队基于 Flutter Web 探索跨端（App\PC\H5）的解决方案，真正实现“Write Once & Run AnyWhere”。本文系该团队的实践经验总结，希望能对大家有所帮助或者启发。

02

[Flutter 渲染优化系列] Flutter 渲染性能问题分析

易老师写了很多篇关于 Flutter 渲染引擎的文章，讲的非常深入，我从中学到了很多，昨天很有幸的加到易老师微信，表达了一番崇敬之情，易老师人非常好，也非常谦逊。

02

Flutter For Web实践

Flutter For Web已经发布一年多时间，它的发布意味着我们可以真正地使用一套代码、一套资源部署整个大前端系统（包括ios、Android、Web）。经过一段时间的探索，使用Flutter For Web技术开发了移动端可视化编程平台——Flutter乐高，在此分享使用Flutter For Web实践过程和踩坑实践，欢迎交流探讨。

02

js监听滚轮事件

chrome（ie）与firefox对滚轮事件的监听方式是不一样的,并且返回的数值正负也是正好相反的

01

未来 Web 设计的 7 大趋势

关于Web设计的未来趋势，我相信很多文章都有涉及。下面就让我带你总结一下哪些才是真正的预言。

01

迈向Flutter深水区：美团外卖Web-App一体化架构实践

今年 1 月，一篇《让 Flutter 在鸿蒙系统上跑起来》的文章引起了社区的关注，为了解更多美团外卖的 Flutter 落地进展，近日，我们采访了美团外卖商家终端团队负责人陈航，他透露，美团外卖商家 App 的鸿蒙适配正在推进落地中，不仅如此，最近半年他们也在探索基于 Flutter Web 体系的 Web-App 一体化架构，这两个部分目前在业务上都有比较大的进展，相关的技术案例也将分别在 ArchSummit 全球架构师峰会（上海站）2021 和 GMTC 全球大前端技术大会（北京站） 2021 跟大家分享。

01

打造聊天框丝滑滚动体验：AI 聊天框的翻转之道

最近在开发AI聊天助手的时候，遇到了一个很有趣的滚动问题。我们需要开发一个类似微信聊天框的交互体验：

02

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。

02

Flutter2 来了！！！

今天，我们宣布Flutter 2：Flutter的重大升级，使开发人员能够为任何平台创建美观，快速且可移植的应用程序。借助Flutter 2，您可以使用相同的代码库将本机应用程序发布到五个操作系统：iOS，Android，Windows，macOS和Linux； Windows Vista，Windows XP和Windows XP。以及针对Chrome，Firefox，Safari或Edge等浏览器的网络体验。Flutter甚至可以嵌入到汽车，电视和智能家电中，为环境计算世界提供最普遍和最便携式的体验。

02

DOM、BOM一些兼容性问题

汇集了许多关于DOM和BOM的兼容性问题，主要是关于 IE 浏览器的，考虑到浏览器迭代，这里主要列出了 IE8 以及之后的浏览器版本。 IE8 浏览器在 2008年推出，距现在（2019）已有11年之久，已经是很老的一款浏览器了。但是在一些项目中，可能仍需要考虑到兼容性，如果兼容到 IE8 已经是很兼容了，毕竟该浏览器也几乎没多少市场份额了。多是一些机构或政府部门在使用。而有些兼容性问题也可能是其它浏览器之间的差异，比如 Chrome 和 FireFox 对于鼠标滚轮事件对象的滚轮方向判断方式不同，Chrome使用 wheelDelta，而FireFox 则采用 detail 做判断。下面将一一说明或做补充实现来尽量弥补浏览器之间的差异。其实大部分就是为了兼容 IE 早期浏览器。

02

重磅！Flutter 2 来了！

今天，我们宣布 Flutter 2 正式亮相！作为 Flutter 的一次重大版本升级，Flutter 2 将帮助开发人员立足任意平台创建起美观、快速且能够轻松移植的应用程序。在 Flutter2 的支持下，您可以使用相同的代码库将原生应用程序发布至 iOS、Android、Windows、macOS 以及 Linux 五大系统阵营之上。此外，Flutter 2 还能够完美契合 Chrome、Firefox、Safari 以及 Edge 等网络浏览器，甚至可以被嵌入至汽车、电视与智能家居当中，借此带来最普遍、最具便携性的计算体验。

02

Flutter 3.3更新详解

Flutter 3 是我们正式为全平台提供支持的一个重量级里程碑，距离它的发布仅过去了三个月，今天让我们有请 Flutter 3.3 正式版！近三个月我们并没有放慢更新迭代的速度——自 Flutter 3 发布以来，我们已经为 Flutter 合并了 5687 个拉取请求。

02

Flutter从入门到能寄几玩儿

毕竟前端出生，找(qi)到(shi)了(bing)感(mei)觉(ru)后(men)，其实就是一个UI框架，只不过他的引擎基于C++,底层基于Skia渲染，DartVM虚拟机以及Text and so on…

01

半小时带你入门 Flutter

由于微信外链限制，推荐阅读等链接无法点击，可点击阅读原文跳转至原文，查看外链。?? 国庆后面两天在家学习整理了一波flutter，基本把能撸过能看到的代码都过了一遍，此文篇幅较长，建议保存(star)

02

App、H5、PC应用多端开发框架Flutter 2发布

Flutter框架已经推出有两年了，但是之前一直在移动端App发力，慢慢发展到了PC端。在window电脑的应用程序和mac电脑的应用程序。

03

热门跨平台方案对比：WEEX、React Native、Flutter和PWA

本文主要对WEEX、React Native、Flutter和PWA几大热门跨平台方案进行简单的介绍和对比。内容选自《WEEX跨平台开发实战》（WEEX项目负责人力荐，从入门到实战，教你玩转移动前端跨平台开发！）

01

有意思的水平横向溢出滚动

最近接到一个很有意思的需求，能否做到当内容横向溢出时，依然能够使用鼠标滚轮对内容进行滚动的方法。

01

JS 滚轮事件实现固定在窗口某个位置的元素显现或隐藏

效果图 📷 html代码

</box> css代码 html,body{ height: 1000px; } #box{ width: 100%; height: 200px; background-color: red; position: fixed; bottom: 0; display: none; } JavaScript代码 //获取元素 var box = document.getElementById('box'); //判断是否为火狐浏览

01

基于 Flutter 的 Web 渲染引擎「北海」正式开源

阿里巴巴历时 3 年自研开发的 Web 渲染引擎北海（英文名：Kraken）正式开源，致力打造易扩展，跨平台，高性能的渲染引擎，并已在优酷、大麦、天猫等业务场景中使用。

02

Vue&uni-app swiper 轮播支持鼠标滚轮翻页实现

最近使用 uni-app 开发的一个 H5 项目，其中有一个用 uni-app 原生 swiper 组件写的轮播。

03

js常用事件整理—兼容所有浏览器

1.鼠标滚动事件。说明：返回值大于0向上滚动，小于0向下滚动。兼容型：所有浏览器。代码： /*********************** * 函数：鼠标滚动方向 * 参数：event * 返回：滚轮方向[向上（大于0）、向下（小于0）] *************************/ var scrollFunc = function(e) { var direct = 0; e = e || window.event; if (e.wheelDelta) {//

09

Scorller的使用详解

This class encapsulates scrolling. You can use scrollers (Scroller or OverScroller) to collect the data you need to produce a scrolling animation—for example, in response to a fling gesture. Scrollers track scroll offsets for you over time, but they don’t automatically apply those positions to your view. It’s your responsibility to get and apply new coordinates at a rate that will make the scrolling animation look smooth.

01

鼠标滚轮事件介绍

简介　　IE6实现了鼠标滚轮事件mousewheel，这个事件包含了一个鼠标事件所没有的属性，wheelDelta，这个属性值始终是120的倍数，而且向上滑动一单位，wheelDelta值为120，向下为-120.随后Chrome，Opera， Safari等也都实现了该事件。Opera10之前的版本对wheelDelta值的符号处理错误，需要修改。但是Firefox没有该事件，而是用DOMMouseScroll。这个事件只有Firefox支持，所以可以单独针对Firefox做兼容。　　另外，HTM

06

简单说一下Flutter框架

在Flutter框架出现之前，主要有以下几个移动App跨平台开发框架：Cordova、Ionic、AppCan、Dcloud、APICloud、React Native。虽然有那么多框架，但是它们的原理都是使用HTML、CSS和JavaScript进行移动App开发，多平台共用一套代码，提供了丰富的主流UI库、用来调用原生API的JavaScript API包装器，同时还提供App打包、发布的工具或服务。由于这些跨平台开发框架是使用标准Web技术开发，所以它们打包出来的App在性能上，多少都会比原生App差上不少，这也是移动App跨平台开发技术一直不温不火的原因。

02

再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

所有浏览器的focus/blur事件都不冒泡，万幸的是大部分浏览器支持focusin/focusout事件，不过可恶的firefox连这个都不支持。

04

10分钟了解Flutter跨平台运行原理！

导语 | 本文将从选型、简介和运行原理三大部分为你介绍Flutter的相关概念，希望能站在框架设计和实现原理的高度，带领大家去理解Flutter区别其他跨平台解决方案的关键所在。一、为什么选择Flutter 随着无线时代的来临，怎么样用最标准化的手段能够让更多的人开发这个页面、怎么样能够提供像H5一样标准的页面，成为大前端时代开发者们最关心的事情。我们把时间线拉长，来看看移动端跨平台技术经过了一个怎样的发展史：下面主要介绍在这个发展过程中跨平台技术有了哪些进步或者做了哪些优化。 Ion

04

Flutter 系列 - 开始你的第一个应用

我们很早就开始了 Flutter 系列知识点的讲解了，第一篇内容见 Flutter 系列 - 环境搭建。因为非抵抗因素，我们停更了好久，今天我们又开始记录起来了。

01

Jetpack Compose终于能稳定支持Wear OS，并带来了适用于手机和平板的1.2版本更新

作者 | 罗燕珊近日，谷歌安卓团队发布 Jetpack Compose 1.2 版本，该版本提供了开发者所需要的更多 API，以支持更高级的用例。例如可下载字体、Lazy grids、窗口插图、嵌套滚动互操作以及更多工具支持，还有针对平板电脑和 Chrome 操作系统的改进。在发布 Jetpack Compose 1.2 版本的同时，官方还发布了 Compose for Wear OS 1.0 ——使得 Compose 也支持 Wear OS 应用开发。这是 Compose 智能手表平台 UI 工具包的

02

Flutter基础篇（8）-- Flutter for Web详细介绍

Flutter for Web官方的Github库地址：https://github.com/flutter/flutter_web ,此存储库包含面向Web 的 Flutter 分支的源代码。Flutter团队的目标是把Web与iOS和Android一起添加到Flutter SDK中的第一层平台。此存储库中的代码提供实现（几乎）整个Flutter API的纯Web包。

01

Python微博移动端爬虫实例

❈ 作者：麦艳涛，挖掘机小王子，数据分析爱好者。 ❈ 本文简要讲述用Python爬取微博移动端数据的方法。可以看一下Robots协议。另外尽量不要爬取太快。如果你毫无节制的去爬取别人数据，别人网站当然会反爬越来越严厉。至于为什么不爬PC端，原因是移动端较简单，很适合爬虫新手入门。有时间再写PC端吧！环境介绍 Python3/Windows-10-64位/微博移动端网页分析以获取评论信息为例（你可以以自己的喜好获得其他数据）。如下图：在这里就会涉及到一个动态加载的概念，也就是我们只有向下滑动鼠

09

Python微博移动端爬虫实例

專欄 ❈ 作者：麦艳涛，挖掘机小王子，数据分析爱好者。 ❈ 本文简要讲述用Python爬取微博移动端数据的方法。可以看一下Robots协议。另外尽量不要爬取太快。如果你毫无节制的去爬取别人数据，别

05

微博爬虫

全文简介本文是用Python爬取微博移动端的数据。可以看一下Robots协议。另外尽量不要爬取太快。如果你毫无节制的去爬取别人数据，别人网站当然会反爬越来越严厉。所以，不要难为别人，到最后其实是在难为你自己。至于为什么不爬PC端，原因是移动端较简单，很适合爬虫新手入门。有时间再写PC端吧！环境介绍 Python3 Windows-10-64位微博移动端网页分析以获取评论信息为例（你可以以自己的喜好获得其他数据）。如下图： 📷 在这里就会涉及到一个动态加载的概念，也就是我们只有向下滑动鼠标滚轮才会加

05

革命性web前端框架Flutter详细介绍和学习路径

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

04

牛赞：音视频前端跨平台技术应用

Flutter是近两年大火的跨终端框架，实时音视频因为疫情的缘故也越来越融入到人们的日常工作生活中，如线上会议、在线教育等。两者结合起来可以碰撞起什么样的火花呢？利用Flutter实时音视频SDK，我们可以快速开发一个跨平台的会议、娱乐、教育等APP。LiveVideoStackCon 2021北京站邀请到腾讯云高级工程师——牛赞，为我们分享利用Flutter如何进行实时音视频渲染，并深入底层，优化视频渲染的性能。文 | 牛赞整理 | LiveVideoStack 我来自腾讯云音视频，本次分享主题

01

Flutter 3更新详解

Flutter 3 实现了 Flutter 以移动端为中心扩展到多平台的产品规划，并在今年 Google I/O大会的主题演讲上正式发布，继Flutter 2.10支持Windows 之后，此次发布提供了对 macOS 和 Linux 桌面端的稳定版支持，同时包括 Firebase 集成的改进，增加了与生产力和性能相关的新特性，并对 Apple 芯片提供了支持。

02

问题探讨01：如何使用鼠标滚轮使单元格中的数值增减？

问题：前不久，有个网友给我提了个问题要我帮助解决。这个问题是，在某单元格中有一个数字，当鼠标滚轮向上滚动时该单元格中的数字以0.01的间隔增加，向下滚动时以0.01的间隔减少？

01

python高效之爬了B站再爬微博

全文简介本文是用Python爬取微博移动端的数据。可以看一下Robots协议。另外尽量不要爬取太快。如果你毫无节制的去爬取别人数据，别人网站当然会反爬越来越严厉。所以，不要难为别人，到最后其实是在难为你自己。至于为什么不爬PC端，原因是移动端较简单，很适合爬虫新手入门。有时间再写PC端吧！环境介绍 Python3 Windows-10-64位微博移动端网页分析以获取评论信息为例（你可以以自己的喜好获得其他数据）。如下图： 📷 在这里就会涉及到一个动态加载的概念，也就是我们只有向下滑动鼠标滚轮才会加

08

Flutter学习指南App, 一起来玩Flutter吧~

从事移动开发这么多年, 各种跨平台技术层出不穷.从最初的基于web的phonegap/cordova到后来的原生组件渲染react-native/weex,再到现在的flutter通过自己开发了一套原生控件渲染,可以说用户体验已经和原生开发相差无几了.

01

Flutter 2.10更新详解

Flutter 2.10 版已正式发布！虽然⾃上次稳定版本发布以来还不到两个⽉，即使在这么短的时间内，Flutter官方也已处理和关闭了 1843 个 Issue，合并了来⾃全球 155 位贡献者的 1525 个 PR。

03

JS简易整页滚动

html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果, 并设置为相对定位, 滚动是修改外部容器的 Top 值, 实现滚动效果.

03

Flutter 与 Compose 应该怎么选择？它们冲突吗？

其实自从 Jetpack Compose 面世以来，关于 Flutter 与 Compose 之间的选择问题就开始在 Android 开发中出现，就如同之前有 iOSer 纠结在 Flutter 和 SwiftUI 之间选谁一样，对于 Android 开发来说似乎“更头痛”的是 Flutter 与 Compose “同出一爹”。

01

Flutter vs React Native vs Native：深度性能比较

玄武门之变是唐高祖武德九年六月初四（公元626年7月2日）由当时唐高祖李渊次子秦王李世民在唐王朝的首都长安城大内皇宫的北宫门——玄武门附近发动的一次流血政变。

02

关于Flutter 2.5稳定版你知道多少？

Flutter 2.5 正式版已于2021年9月8号发布！这是一次重要的版本更新，也是 Flutter 发布历史上各项统计数据排名第二的版本。我们关闭了 4600 个 Issue，合并了 3932 个 PR，它们分别来自 252 个贡献者和 216 个审核者。回顾去年 – 我们收到来自 1337 个贡献者提交的 21072 个 PR，其中有 15172 个被合并。在详述本次更新的内容之前，我们想强调，Flutter 的首要工作始终是高质量交付开发者们所需要功能。

02

【老孟Flutter】Flutter 2 新增的功能

今天，我们很高兴地宣布Flutter 2的发布。距离Flutter 1.0的发布已经两年多了，但是在很短的时间内，我们已经关闭了24,541期，并合并了765个贡献者的17,039个PR。自9月Flutter 1.22发布以来，我们已经关闭了5807期并合并了298位贡献者的4091个PR。特别感谢我们的志愿者捐助者，他们慷慨地抽出时间来改进Flutter项目。Flutter 2 release 版本前几名志愿者贡献者是xubaolin46个PR，a14n32个PR，专注于使Flutter达到零安全，hamdikahloun具有20个PR，改善了Flutter插件的数量。但是，不仅仅是编码员为Flutter项目做出了贡献。一大批志愿者PR评审人员还负责评审1525个PR，包括hamdikahloun（再次！），CareF和YazeedAlKhalaf（16个！）。Flutter确实是社区的一项工作，如果没有问题提出者，PR贡献者和代码审查者，我们就不可能进入第2版。此版本适用于所有人。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭