文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【JS】310- 使用 focusout 事件，解决 iOS 键盘收起不归位问题

iOS 上键盘收起时界面无法归位的问题。...> 截图如下： 键盘弹起时页面自动上移 当用户在手机上输入联系电话时，IPhone键盘会弹出，此时iphone上为了让用户可以看到电话输入框，会将整个页面整体向上移动（不然键盘会遮住电话输入框）。...此时，实际上页面顶部是离开了我们的视口一部分距离的（我们看到界面中消失了一行输入框）。 键盘收起时页面无法还原归位 然而当用户输入完成关闭键盘后，键盘虽然收起了，但页面位置却不会还原。...问题分析： 实际上这是由于 iOS 无法在键盘收起时，页面滚出视口的部分没有掉下来导致的。这时用户是可以通过手指将页面拖回来的。 但是毕竟体验不好。...要解决这个问题，我们可以在用户光标离开输入框的时候，调用 window.scrollTo(0, 0) 来把页面滚动到跟视口顶部对齐，从而实现页面归位的效果。

3.4K10

web前端常见面试题

； ch 代表元素所用字体 font 中“0”这一字形的宽度； vh 1vh 相当于视口高度的 1%，100vh 就是视口的高度； vw 1vw 相当于视口宽度的 1%，100vw 就是视口的宽度； vmax...视口高度 vw 和宽度 vh 两者中的最小值 vmin 视口高度 vw 和宽度 vh 两种中的最大值； % 相对于父级元素的大小来确定； 参考：CSS [1] CSS percentage...捕获阶段的行为： 浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它； 然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作...，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素； 而冒泡与捕获恰恰相反： 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它； 然后它移动到下一个直接的祖先元素...比如： blur 元素失去焦点时触发，focusout 事件也是失去焦点时触发，但可以冒泡； focus 元素获取焦点时触发； mouseenter 鼠标移动到元素上时会触发该事件，与之对应的是 mouseover

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

    3ds Max 中的导航控件ViewCube入门介绍

    软件环境：3d Max2015 第一步、启动3d Max软件，打开场景文件 ViewCube图标默认位于“透视”视图的右上角位置，只有当光标位于ViewCube图标上方时，它才变成活动状态，并且为不透明显示...第二步：当光标移离ViewCube图标时 则会变成非活动状态，图标呈半透明显示，这样不会遮挡“透视”视图中的对象。 ?...第三步：当ViewCube为非活动状态时 可以控制其不透明级别以及大小显示它的视口和指南针显示。这些设置位于“视口配置”对话框的“ViewCube”面板上。...在ViewCube图标上单击鼠标右键，在下拉列表中选择“配置”命令，即可在弹出的“视口配置”对话框中对ViewCube的属性进行更改。 ? ?...也可以通过单击工作视图左上角“+”命令，在弹出的下拉菜单中执行“ViewCube>显示ViewCube”命令，来控制ViewCube图标的显示与隐藏。 ?

    1.2K50

    waypoint_使用jQuery Waypoint创建粘性导航标题

    最重要的是，您将熟悉jQuery Waypoints插件的基础知识，该插件将提供高级功能：当用户向下滚动时，导航栏将停留在视口的顶部，并进行更改以指示当前部分。...当用户向下滚动时，表达式direction==='down'计算结果为true ，因此我们的导航栏将接收到sticky类，并停留在视口的顶部。...当元素的顶部在视口顶部下方的指定距离处时，正值触发路点；当元素的位置在视口顶部上方远处时，负值触发路径。 ）。...实际上，这意味着将告诉脚本当前正在查看哪个部分的假想线放置在视口顶部的三分之一左右，即观看者在阅读长文本时所处的位置。 一个更强大的解决方案可以使用功能来适应导航栏高度的变化。...如果您不仅仅想添加和删除类，还可以考虑使用LavaLamp这样的插件。 在某些时候，您可能已经注意到，单击导航栏中的链接会将部分的顶部置于浏览器视口的顶部。

    3.4K30

    gsap的ScrollTrigger让你的页面更炫酷

    之前做官网，设计的交互虽然在其他网站很常见，但是我一时不知道如何实现，直到我看到了gsap，发现原来这么简单。...xPercent 是一个相对移动的值，-100 (boxItems.length - 1) 意味着将所有的 boxItems 元素水平移动到最后一个元素的位置。...pin: true: 将 boxContainer 固定在视口中，直到动画结束。start: 'top top': 定义动画开始的滚动位置，当 boxContainer 的顶部与视口顶部对齐时开始。...end: +=${boxContainer.offsetWidth || 0 - innerWidth}: 定义动画结束的滚动位置，计算方式是 boxContainer 的宽度减去视口的宽度。...查看效果设置了的start: 'top top'后，可以看到marker的scroller-start和scroller-end都在视口的顶部。

    35720

    clientWidth，offsetWidth，scrollWidth你分的清吗

    ，这个只针对dom的子元素出现溢出情况时，才有效果，不然它始终和clientHeight相等 scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。...注意:当元素溢出浏览器的视口，值会变成负数。...大概是这样 实现思路就是，去拿到选中元素的clientHeight和offsetTop,并和列表的高度区间做比较，计算出元素是在列表视口的内部，还是溢出的视口，如果溢出了视口，那么就回滚。...text-align: center;     font-size:22px;     color:#9ef64d;   } 核心方法 const { value } = this.state; // 滚动视口的高度...> containerHeight || needScroll < 0) { // 将选中元素放入容器视口中 const timer = setTimeout(() => { this.scrollRef.scrollTop

    2.1K10

    CSS 定位网页元素

    前言当我们在设计网页时，经常需要对网页中的元素进行定位，以便它们出现在我们想要的位置。在 CSS 中，我们可以使用不同的定位属性来定位元素。...div { position: relative; top: 20px; left: 10px;}三、position: absolute这个属性将元素从文档流中删除，并相对于其最近的已定位祖先元素进行定位...div { position: absolute; top: 20px; left: 10px;}四、position: fixed这个属性将元素固定在视口的某个位置，不随页面滚动而移动。...div { position: fixed; top: 20px; left: 10px;}五、position: sticky这个属性将元素固定在容器的顶部或底部，直到它滚动到视口的顶部或底部。...你可以使用 top、bottom、left 和 right 属性来调整元素的位置。div { position: sticky; top: 20px; left: 10px;}

    1.4K40

    CSS3与页面布局学习总结（四）——页面布局的多种方法

    当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下： 1.1.1、向上移动 当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。...当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移，示例如下： <!...先了解两个概念： 可见视口（visual viewport）：浏览器窗口的可视区域 布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。 视口（visual viewport）：浏览器窗口的可视区域 布局视口（layout viewport）：CSS在应用时所设置的布局最大宽度。布局视口可以大于可见视口。...总之是大于屏幕宽度（可见视口）的。

    2.5K20

    JQ事件和事件对象

    1 事件 一 .鼠标事件    1.ready（）页面载入事件：载入文档节点    2 click（）熟悉的单击事件    3 dbclick（）双击事件    4 mousedown() /mouseup...focusin可以在父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况  四 其他事件   1 scroll（）滚动滚动条时触发的事件      2  resize...（）当调整窗口大小时触发的事件 //小案例（当滚动到一定高度出现搜索菜单） .bar{ width: 100%; height: 50px; background...//整个屏幕的高度    不会随着滚动条变化而变化          //clientX/clientY  获取相当于页面视口的坐标 //除去上下窗口      不会随着滚动条变化而变化 将event.keyCode 和 event.charCode标准化了。推荐用event.which来监视键盘输入。

    4.1K20

    大白话详解Intersection Observer API

    ——当用户滚动到接近底部时直接加载更多，而无需翻页，给用户一种网页可以无限滚动的错觉 两个元素是否相交,如： 检测广告的曝光情况——为了计算广告收益，需要知道广告元素的曝光情况 在用户看见某个区域时执行任务或播放动画...)元素 --- 帮助我们判断目标元素是否符合条件的元素 以下两种情况根元素会默认为顶级文档的视口(一般为 html)。...如果指定为 null，也为浏览器视口。 必须是目标元素的父级元素。 rootMargin --- 根元素的扩缩边距。...如果传值为 null，则为顶级文档的视窗。 顶级文档的视口(一般为 html) rootMargin 根元素的扩缩边距。...，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null intersectionRect 返回目标元素与视口（或根元素）的交叉区域的信息

    37010

    移动端Webapp中的那些Bug

    IOS overflow: scroll 全屏滚动出界 1.1 出现场景 滑动到最顶部(最底部)的时候，停下，然后继续向上滑动(向下滑动) ?...IOS输入框聚焦后页面整体上移，头部顶出 4.1 出现场景 页面中有fixed头部，输入框，并且输入框靠下时，当输入框focus的时候，会将整个页面上移，导致头部被顶出去。...top值 滑动的时候，监听scroll方法，动态设置头部top值 失去焦点的时候，重新将头部恢复至fixed定位 滑动时，如果头部结构太复杂，可能会引起固定不流畅(会跟着滚动) 代码请往这里看： var...说明：测试了很多机型，发现现在的android上的浏览器都貌似修复了这个问题，就是当键盘弹上来的时候，会默认地将输入框上移。但是我在项目中内嵌的webview中确实遇到了这种问题。...5.2 解决方案 弹出键盘的时候，计算可视区域的高度以及输入框距离视口的高度加上本身的高度（可视区域、自身距离视口高度 + 自身高度）。

    3K50

    SceneKit 场景编辑器-为您的AR体验构建3D舞台

    这是正确的，它是您在手机上看到的预览船。应用程序加载时调用此场景。 SceneKit％20Scene％20Editor 视口(VIEWPORT) 包含飞船的中间部分是视口。...它们之间的弧度是一次用一个轴旋转对象。 视口控件 视口下方是视口控件。在这个栏上，我们可以改变到不同的视角。我经常将它设置为前面，因为这是在屏幕上添加模型时的起始角度。...如果场景附带动画，您可以通过单击“ 播放”按钮进行预览。 场景图视图 打开场景时，通常会隐藏场景图视图。要显示它，请单击视口下方左下方的小窗口图标，在控件旁边。在这里，您可以看到组成场景的所有部分。...胶囊体颜色 对于胶囊体的颜色，请执行与圆柱体相同的步骤。 胶囊体位置 对于“ 位置”，将z设置为0以使其居中，将x设置为1.4。至于y，将绿色箭头向上和向下拖动到约-0.7。...转到“ 材质”检查器，将“ 着色”更改为“ Blinn”，单击“ 漫反射”时，使用颜色选择器从Apple网站中选择图像手镯中的颜色。

    5.6K20

    企鹅FM点歌台总结

    轮播 要求 无限轮播 JS 没有加载上来的时，保证占位，保证首张 banner 图片正常显示 在实践过程中，我们尝试了2种方式，无论哪个方法，结构都是视口>轮播容器>banner容器+banner容器....，只有滚动到视口区域中的弹幕，才会被展现出来： .cmt-wrapper{ position: absolute; bottom: 3.75rem; left: 55px; z-index...top 值就是视口区域的高度。...因为滚动区域是从下到上滚动，而视口是保持在同一位置，以下是初始状态： 04.png 当再滚动一下（要注意滚动的幅度哦），滚动区域和视口会出现接壤或者滚动区域会跑到视口的上面了，那么第一个 .cmt-item...就要加上 .anim-hide 了： 05.png 最后的效果大概是这样的： 06.gif 键盘呼起时 安卓和 iOS 键盘呼起时页面的形态不同，iOS 上会将页面上移一点，保证输入区域不会被键盘挡住

    1.5K40

    创意卡片式项目管理界面UI设计源码

    该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息。...single-project:nth-of-type(3) { transform: translateY(66.6666666667%); } .cd-title（项目的标题）被设置为33.33%（1/3视口的高度...），而它的伪元素.cd-title::before被设置为300%，实际是等于视口的高度。...它的::before伪元素是一个空白占位，它等于屏幕视口的宽度和高度，它的作用是让项目图片开始时可以全屏显示，而不是被content-wrapper的内容覆盖。...当用户点击了.cd-nav-trigger按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。

    1.6K20

    Framer 使用滚动变体创建动画

    “滚动变体”（Scroll Variants） 允许您在页面上进入视口的部分上更改组件的活动变体。...您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观，例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...触发的时机呢,就是ViewPort, 视口的顶部,中部,底部到达浏览器窗口的顶部 触发次数: 重复重复,即滚动下去触发一次, 滚动上去也依然会触发一次. To状态,组件的变化....当黑色部分在浏览器视口中,导航栏使用默认的组件 当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件 当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件 效果: 我们可以看到 当滚动不到不同部分的时候...观察上方的Gif图片,我们就会发现,滚动到不同部分.右边的ICON 图标 在进行相应的变化.

    10010

    何为 content-visibility？

    因此，如果我们将这个属性应用在一些一开始需要被隐藏，但是其后在页面的某一时刻需要被渲染，或者是一些需要被频繁切换显示、隐藏状态的元素上，其渲染效率将会有一个非常大的提升。...当然，现代浏览器愈加趋于智能，基于这种场景，其实我们非常希望对于仍未看到，仍旧未滚动到的区域，可以延迟加载，只有到我们需要展示、滚动到该处时，页面内容才进行渲染。...好，我们实际开始进行滚动，看看会发生什么： 由于下方的元素在滚动的过程中，出现在视口范围内才被渲染，因此，滚动条出现了明显的飘忽不定的抖动现象。...当然，在向下滚动的过程中，上方消失的已经被渲染过且消失在视口的元素，也会因为消失在视口中，重新被隐藏。因此，即便页面滚动到最下方，整体的滚动条高度还是没有什么变化的。...div> div> 如果我们不使用 contain-intrinsic-size，只对视口之外的元素使用 content-visibility: auto，那么视口外的元素高度通常就为 0。

    1.6K10

    前端优化：首屏加载速度的实践

    其实懒加载是一种只在需要时才加载图片，它通过在用户滚动到图片位置之前，不加载图片或只加载低分辨率的图片占位符，来减少首屏加载时的网络请求和带宽占用。当用户滚动到图片位置时，再加载实际的高清图片。...还有就是实现懒加载的方式有多种，比如使用JavaScript监听滚动事件，判断图片是否进入视口；或者使用Intersection Observer API，更加精确地判断图片与视口的交集情况，这些方式都可以根据实际需求进行选择和调整...) => { entries.forEach(entry => { if (entry.isIntersecting) { // 当图片进入视口时，加载真实图片...src属性替换为data-src属性，并使用一个占位符作为背景图，然后使用Intersection Observer API来监听图片是否进入视口，一旦进入视口，就将data-src的值赋给src属性，...合并请求：将多个相关的网络请求合并成一个请求发送，可以减少网络传输的时间和带宽占用，比如可以将多个图片的URL合并成一个数组，一次性发送给后端进行处理。

    24641

    JavaScript代码获取浏览器的可视高、文档滚动高和滚动距离

    如果测试时，发现页面有滚动条，但是获取的滚动高度和可视高度一样，要注意看滚动条是不是 iframe 内嵌框架里的，上面可以进行切换，默认的 top 是默认最外层的框架。...把滚动条滚动到最底下，滚动的距离就是滚动高-可视高。...下面的表格展示了文档中用到的几种属性含义和用法： 属性 含义 示例 document.documentElement.clientHeight 文档根元素的视口高度，不包括滚动条、边框和外边距。...var clientHeight = document.documentElement.clientHeight; document.body.clientHeight 文档的 元素的视口高度...var clientHeight = document.body.clientHeight; window.innerHeight 浏览器窗口的视口高度，不包括浏览器的工具栏、菜单栏等。

    40500
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券