首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端浏览器和微信浏览器上禁止body的滚动条

但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的...; position: fixed; } 这个就是完全的禁止上下滑动,没有滚动条,且在iOS的safari浏览器上完全不能上下滚,但是确发现微信浏览器上可以上下缩动(下面再解决)。...我最后发现,上面这种解决是普遍的浏览器做法,如果要更彻底一点,就直接使用js代码去控制touchmove的事件,直接精致,这个在微信和手机浏览器上完成可行。...参考:http://www.cnblogs.com/lbcheng/p/6044303.html 经过上面的设置,如果用户在微信浏览器上不能滚动,但是跳出到了iOS的safari浏览器之后,会有很多变数...2、当跳出到手机浏览器上完全可以滑动。上面的思路实现:1、通过微信useragent来判断,如果是微信浏览器自动加入class去设置。2、非微信useragent就默认不加class。

3K10

移动端前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC端和浏览器端可公用,但有些事件却只在移动端产生,如触摸相关的事件 本文整理了移动端常见的一些事件,包括原生支持的click、touch、tap、swipe事件,也有定义型的gesture...手势事件(目前只是一个概念,使用的时候需封装模拟) 使用到的是移动端的Chrome浏览器,本文只对该浏览器进行调试,其他浏览器暂未考虑到 一、事件定义及分类 1. click事件 单击事件,类似于PC端的...四种之分 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时,会触发 touchend:当手指离开屏幕时,会触发 touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候...快速点两下,如图为相关事件触发的顺序,可以看到click事件因为延迟的原因只触发了一次 ? 长按,如图为相关事件触发的顺序 ? 向右滑动一下,如图为相关事件触发的顺序 ?...:当有两根或多根手指放到屏幕上的时候触发 gesturechange:当有两根或多根手指在屏幕上,并且有手指移动的时候触发 gestureend:当倒数第二根手指提起的时候触发,结束gesture 按照定义

2.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    上海交大研究人员使用非侵入性脑机接口和计算机视觉引导对机器人手臂进行共享控制

    在这种自主模式下,机器人将全速移动。 下图为仲裁系统的原则分析图。其中(a)为立体图。将UR5机器人的前部空间分为三个部分: BCI引导区域(蓝色)、视觉引导区域(橙色)和盲区(灰色)。...圆圈中的灰色点表示随机位置。 在会话2中,与会话1中相同,在圆圈内生成64个随机位置。图3 (b))。在每次试验中,只有一个目标块位于圆圈内。然后受试者被要求移动机械臂来完成伸展和抓取的任务。...在这个过程中,受试者一动不动地坐在椅子上,看着一个空白的屏幕,而不是机械手臂。同时记录他们的脑电图信号,产生两个随机的脑机接口控制命令。需要完成的任务与会话2中相同。在这一阶段还有64次单独的试验。...下图为会话1中五名受试者的轨迹样本,对于每个位置(L1-L8),均绘制了具有中位长度的轨迹样本。蓝线表示BCI引导控制,而橙色线表示视觉引导控制。...会话1中五名受试者的轨迹样本 如上图,机械臂只能在BCI引导的控制下在左前方向和右前方向移动。这不会给轨迹带来更多的冗余。实际上,轨迹的长度主要由机械臂进入视觉引导区域的位置确定。

    74230

    研究人员使用宽场脑成像技术研究意图控制,探索更好的脑机接口使用方式

    通过监测这只老鼠控制游标,将游标移动到一个目标位置以接受奖励,研究人员能够研究大脑是如何表现意图控制的。 发表在《Neuron》杂志上的一项研究,揭示了大脑是如何表现因果控制的物体的。...对人类来说,这可能是控制机械臂拿起一杯水,或者移动电脑上的光标,用大脑输入信息。该论文的第一作者Kelly Clancy博士表示:"在动物身上,我们使用这些设备作为模型,如何使BMI更好。"...一旦我们了解了支持如何学习意图控制的神经回路,我们就由希望使人们更轻松地使用BMI。" 1 实验与图例 传统上,研究有因果控制的物体在大脑中是如何呈现的一直是个挑战。...图(D)3只实验动物在1天的训练中被击中后,控制区域的DF/F值就会被触发,这表明动物在获得奖励时会使用不同的策略。粉色线表示击中目标的时间,灰色线表示奖励的交付时间。...右:在这个训练过程中,跑,舔,扫视的平均点击量;灰色阴影表示均值周围95%的置信区间。粉色箭头表示目标命中,黑色箭头表示奖励传递。

    52720

    谷歌世界模型爆发:单张图生成可玩3D世界,还要和马斯克一起做AI游戏

    从描述上看,其与 Genie 2 似乎具有一样的能力,都能基于单张图像生成可交互的 3D 场景,参阅报道《刚刚,李飞飞创业首个项目引围观:单图生成交互 3D 场景,空间智能来了》。...下面展示了一些人们与 Genie 2 交互的例子。对于每个示例,模型都会使用 Imagen 3(DeepMind 最先进的文生图模型)生成的单张图像作为提示。...Genie 2 可以生成长达一分钟的一致世界,大多数示例持续 10-20 秒。 动作控制 Genie 2 能智能地响应键盘按键对应的动作,识别角色并正确地移动它。...例如,模型必须要明白,箭头键应该移动机器人而不是树木或云。 生成反事实视频帧 Genie 2 可以从同一起始帧生成不同的轨迹,这意味着可以为训练智能体来模拟反事实体验。...下图为 Imagen 3 生成的电脑游戏图像,提示词为「一张电脑游戏图片,展示了一个粗糙的石洞或矿井内部场景。观看者的位置是第三人称视角,位于玩家头像上方,向下看向头像。玩家头像是一个手持宝剑的骑士。

    8200

    第135天:移动端开发经验总结

    四、常见的移动端问题 1、什么是Retina 显示屏,带来了什么问题   retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina...Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 7位数字,形如:1234567 带括号及加号的数字,形如:(+86)123456789 双连接线的数字...,我们可以通过如下的meta来管别邮箱的自动识别:   同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能...,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0,也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩。...、 禁止文本缩放 当移动设备横竖屏切换时,文本的大小会重新计算(或者在内嵌浏览器中设置字体的大小),进行相应的缩放,当我们不需要这种情况时,可以选择禁止: html {   -webkit-text-size-adjust

    1.6K30

    关于无障碍设计的七件事

    换句话来说,当文本大小是24px或18px加粗或者更大时,在白色文本背景上使用的最浅的灰色是#959595。 ?...上图为#959595的文本在白色背景上 对于较小的文本,在白色背景上,可以使用的最浅的灰色是#767676。如果使用的是灰色背景,那么文本的颜色就要更深。 ?...上图为#767676的文本在白色背景上 有一些工具可以帮助设计师找到合适的无障碍设计色板。比如,Color Safe和WebAIM颜色对比度检查器。...他们的UI通过了对比度规则,因为他们使用的最浅的灰色是#767676。 ? 小练习: 练习使用高对比的颜色组合进行设计。(经过这项练习,你会惊讶地发现自己倾向于使用高对比色彩组合来设计。...IE浏览器自带的灰色虚线边框或是Chrome自带的蓝色光晕就不是很讨人喜欢。 ? 但是,问题是大多数网站都没有建立自己的焦点样式。

    3K30

    机器人A*寻路算法详解

    在机器人领域中,A*算法常用于移动机器人路径规划。 为了便于理解,本文将以正方形网格地图为例进行讲解。...如图,蓝色格子是障碍物,灰色格子是可通过区域,绿色格子是起点(S),红色格子是终点(D)。我们要做的是找到一条从起点到终点的最佳路线。...为了顺利地解决问题,我们先要设定一些约束条件: 1. 从一个格子可以朝周围 8 个方向移动。...把上一步找到的邻居都加入 Open List。从 Open List 中移除 S,并将其加入另一个已检查节点的列表(Closed List)。...比如不同种族或技能的单位在同一地形上的移动成本各有差异,同一单位在草地、泥地、砂石、沼泽等各种地形上移动的成本也不尽相同(对应不同的 G 值增量),甚至允许以较高的成本翻越障碍(访问外国网站、过河等);

    2.2K40

    【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

    一、案例需求 实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体的 ; 二、案例核心要点 1、获取焦点事件 - onfocus 事件 在 JavaScript 中 ,...当 DOM 元素 获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 当 用户 点击输入框 或 通过键盘切换到输入框时...onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或 按下 Tab 键 移动 焦点时 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性...; 鼠标点击 表单 , 此时 灰色的字体 消失 , 表单中显示光标 ; 此时输入内容显示的是黑色字体 ; 完整的执行效果如下 : 四、开关灯案例 1、案例需求 实现如下开关灯效果 : 2、核心要点...console.log(currentColor); // 输出当前页面背景颜色 如果没有为 document.body.style.backgroundColor 显式设置值 , 则它将 返回空字符串或浏览器默认的背景颜色

    14510

    移动端web开发笔记

    所以启动图片需要减去状态栏区域所对应的方向上的20px大小,相应地在retina设备上要减去40px的大小 浏览器打开一个PC上的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态...双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接,此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作,所以,捕获第一次单击后...; /* 方法1 */   -webkit-appearance: none; /* 方法2 */ } 16、 快速回弹滚动 我们先来看看回弹滚动在手机浏览器发展的历史: 早期的时候,移动端的浏览器都不支持非

    3.7K20

    今日软荐:抠图工具再添一员猛将!批量去背景从未如此简单

    最近在 Huggingface 上发现了一个非常强大的批量抠图工具:remove-background-webgpu。...它不仅支持单张图像处理,还可以批量处理图片,处理完的图片可以选择性下载或打包下载,这对那些需要频繁抠图的小伙伴来说,绝对是一大福音。 最重要的是,它完全免费并且在浏览器中就能运行,无需下载安装!...该工具不仅免费,还具备无图像托管、无需服务器处理的特点,大大提高了处理速度的同时也保护了用户隐私。 工具特点 • 浏览器内运行,无需安装 不需要额外下载软件,打开浏览器即可使用,非常方便。...• 使用 Transformers.js 构建 得益于 Transformer 模型的强大性能,该工具可以高效、准确地去除图像背景。 如何使用? 1....设计师在处理多张图片时,使用该工具可以快速去除背景,将精力集中在创意设计上 • 个人社交媒体 想要快速去掉图片中的背景,制作有趣的个人头像或社交媒体图片 总结 总的来说,remove-background-webgpu

    42610

    跨越虚幻与物理世界的鸿沟 | 一张图生成一个 3D 游戏世界正在成为现实

    李飞飞的World Labs 发布了他们空间智能的首个预览版本,上线了一个浏览器可访问的 AI 3D demo可以试玩。...通过单张图片生成完整3D世界,而且还能与之交互就像是让你“走进”一张图片,探索其生成的三维场景....交互性:生成的3D世界可以像玩游戏一样自由移动相机探索,支持浅景深、希区柯克变焦等操作。 实时渲染:场景在浏览器中实时渲染,支持摄像机效果和可调节的模拟景深(DoF)。...你可以停留在花朵的细节上,或者从角落里偷看,看看里面有什么。 正确的几何形状:我们生成的世界遵循 3D 几何的基本物理规则。它们具有扎实感和深度感,与某些人工智能生成的视频的梦幻性质形成鲜明对比。...,而一个栩栩如生、互动性强、充满活力的虚拟世界则是我们的目的地,World Labs 正在努力缩小这两者之间的差距。

    14310

    ps色阶怎么用:一招搞定曝光调整 | 萧蕊冰

    这样所做的调整会直接覆盖到原图层上,无法再次修改或者撤销,并不推荐。 image.png 更好的方法是使用调整图层。 图层面板下方的第四个图标,包括了所有的调整图层选项。...下面我会以这张灰度图为例,演示色阶中各个滑块的作用。 灰度图演绎了亚当斯的分区曝光理论,图片从左到右依次为纯黑,不同亮度的灰色和纯白共11个区域。...可以看到灰度图中,原来不同亮灰的 VIII、IX、X区域,现在已经变成了纯白一片。 如果同时把黑色滑块、白色滑块往中间移动,意味着照片中的纯黑、纯白区域会大大增加,增加照片的反差对比度。...观察灰度照片,可以看到改变输出色阶下限后,灰度图中纯黑、深灰色的区域都被提亮了。因为照片中最暗的部分,也只能达到亮度111的灰色。 如果右移输出色阶下限的同时,右移黑色滑块,会出现什么情况呢?...只右移黑色滑块,照片中会有更多的纯黑色,原来的I、II、III、IV都从深灰变成了一整块黑色。 但是现在还移动了输出色阶下限,导致画面中最暗的地方也要有111的亮度。

    1.8K20

    宛如白昼,谷歌发布最强夜景拍照AI算法,单摄秒杀一众苹果华为三星

    额……明暗度完全不一样,Pixel 3拍出来色泽鲜亮,披萨上的肉粒清晰,令人食欲大开。...解决噪点问题有两种方法:合成多张短曝光照片、延长单张照片的曝光时间。 之前提到的HDR+合并多张图片,其主要目的是改善动态范围,用于解决拍照画面中明暗反差巨大的问题。...其次,长时间曝光会导致运动模糊,这是由于手抖或场景中物体的移动造成的。光学防抖(OIS)可以延长手持相机的曝光时间(最多约1/8秒),但对于长时间曝光或移动物体无效。...左图为相机捕获的15帧视频,中图为运动测量关闭时拍摄的图像,右图为开启运动测量拍摄的照片。由于曝光时间更短,所以右图看起来更清晰。 以下是检测到三脚架拍摄时的照片: ?...左图为手持拍摄,333毫秒曝光×15帧=5秒;右图为三脚架拍摄,1秒曝光×6帧=6秒。可以看出右边图像更清晰,而且能看到更多星星。

    1.6K30

    宛如白昼,谷歌发布最强夜景拍照AI算法,单摄秒杀一众苹果华为三星

    额……明暗度完全不一样,Pixel 3拍出来色泽鲜亮,披萨上的肉粒清晰,令人食欲大开。...解决噪点问题有两种方法:合成多张短曝光照片、延长单张照片的曝光时间。 之前提到的HDR+合并多张图片,其主要目的是改善动态范围,用于解决拍照画面中明暗反差巨大的问题。...其次,长时间曝光会导致运动模糊,这是由于手抖或场景中物体的移动造成的。光学防抖(OIS)可以延长手持相机的曝光时间(最多约1/8秒),但对于长时间曝光或移动物体无效。...左图为相机捕获的15帧视频,中图为运动测量关闭时拍摄的图像,右图为开启运动测量拍摄的照片。由于曝光时间更短,所以右图看起来更清晰。 以下是检测到三脚架拍摄时的照片: ?...左图为手持拍摄,333毫秒曝光×15帧=5秒;右图为三脚架拍摄,1秒曝光×6帧=6秒。可以看出右边图像更清晰,而且能看到更多星星。

    90110

    得物App白屏优化系列|归因篇

    recyclerView的特性,我们最终是采用了View类的onAttachedToWindow和onDetachedFromWindow回调来作为对单张图片检测的开始和结束。...之后从该Bitmap中居中均匀的取出N*N个像素点(这里以3*3为例),按其色值进行统计,找出占比最高的色值的比例,如果其占比超过一定阈值,说明他是白图(不一定是白色,因为占位图背景是淡灰色)。...单张图片检测流程示意图:频次控制用户正常使用过程中,屏上图片的变更较为频繁,因此需要将检测周期限制为3s一次,并且经检测确认正常或白屏的图片不再参与检测。...由于首页页面大小和设备相近,因此需要采取一定比例进行压缩,能够勉强看清文案即可,这里建议使用270*480,符合大部分移动设备的屏幕比例:四、平台归因思路白屏这种综合性问题绝大部分都是环境异常导致,因此在归因优先级上更倾向于环境类问题...因此需要在服务端做二次check,即下载这张图的原图并按100%采样做同样的统计,如果得到的比例数据和客户端检测结果相近则标记为脏数据。左图为占位图,右图为刀剑模型商品图。

    27410

    教你一招如何让网页变成灰色?

    在一些特殊时期,很多网站的页面都会不同程度上设置成了灰色。看到这些灰色的网页,开发者们可能会很好奇:网页内容不变的情况下,如何实现整页显示为灰色?...一般方案:CSS 实现网页灰度 CSS 滤镜能实现网页灰色,在页面加入以下 CSS 片段即可让页面显示为灰色。...,和低版本 Safari 浏览器; 不支持一些直接加载图片链接的场景; 在 IE 浏览器上,文字颜色、背景颜色等可以用 CSS 修改,那图片要怎么处理成灰色呢?...数据万象的灰度图方案 腾讯云数据万象 CI ,支持对存储在 COS 上的图片显示为灰度图。你只需要简单地在 COS 对象链接最后追加 ?...imageMogr2/grayscale/1 除了灰度图功能,还有丰富的图片处理功能: 腾讯云数据万象 CI (Cloud Infinite,CI)还能实现对 COS 存储桶上的图片、视频、音频、文档等数据的处理

    1.2K20

    图片上传预览插件制作思路及Demo分享

    背景 其实,图片预览功能非常地常见。所以就动手做了一个小插件。在此分享一下思路。 实现图片预览的一些方法。 了解了一下,其实方法都是大同小异的。...大概有以下几种方式: 订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上。...且浏览器支持情况不一致,支持的浏览器:FF3.6+,Chrome7+,IE10+。...因为无论是单张图片上传还是单张图片上传,都需要传入、上传图片的input按钮、img标签、包裹着img的div、最大的单张照片的值,单位为KB。所以这四个参数在创建上传图片对象的时候就要传入。...按钮、img标签包、裹着img的div、最大的单张照片的值,单位为KB obj.uploadSinglePic(200,250);//单张图片上传,参数分别为每张的宽度、高度

    1.4K20

    2D照片秒变3D,Adobe新方法让你只用一张图像轻松做特效

    基于单张图像合成逼真的移动镜头效果是一个非常难的问题,它需要解决两个基础难题:1)要想基于新摄像机位置合成新视图,就需要准确复原原始视图的场景几何;2)从预测场景几何中合成具备时间连贯性的新视图序列需要处理空洞难题...由于待修复区域本质上并非矩形,因此 DeepFill 无法修复出合理的结果。EdgeConnect 的修复结果更加合理,但不具备时间连贯性且无法保持目标边界。...而新方法包含逼真的移动视差和强大的景深预测,因此特效结果更好。 ? 图 11:2D Ken Burns 和 3D Ken Burns 特效对比图。注意移动视差方面的差异。...表 1(上)根据每个基准定义的不同量化指标对比不同方法的景深预测质量。该研究提出的方法在所有景深质量指标上均可媲美当前最优的景深预测方法。...表 1(下)列举了新方法的两种变体,方便更好地分析景深估计网络和训练数据集的效果。具体而言,研究者使用 DIW 数据集的所有可用训练数据训练网络架构,与基于研究者创建的数据集训练的网络进行对比。 ?

    1.4K40
    领券