18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

深圳网站商城系统搭建—广州企业网站建设:滚

2021-03-17分享 "> 对不起,没有下一图集了!">

旋转弹跳(有时候候也称作旋转 橡皮筋 或 延伸性旋转 )一般用于说明旋转到网页页面网页页面顶部或HTML原素时要看到的具体实际效果,或者偏重底端的在运用碰触屏或触碰板的设备机器设备上的网页页面网页页面或原素,在原素或网页页面网页页面弹回之前可以看到空白页页房间内室内空间并将其自身两边两端对齐回顶部/底端(当您松掉碰触/手指头头时)。您可以看到在CSS旋转捕捉原素正中间造成相仿的具体实际效果。
[标识:內容1]

但是,原文中将重要详尽详细介绍旋转到网页页面网页页面顶部或底端时的旋转弹跳。换句话说,当scrollport已到达其旋转界线时。

旋转弹跳的一个十分好的掌握恩恩怨怨常常出現用的,因为它将帮助您管理决策如何构建您的网站以及您希望网页页面网页页面如何旋转。

广州市市企业网站建设倘若您不希望看到fixed网页页面网页页面上的原素移动,则不希望旋转弹跳。一些案例包括:当您希望将页眉或页脚固定不动没动在某一位置时,或者倘若您要想修复一切其他原素(如莱单),或者您希望网页页面网页页面在旋转和旋转时的一些位置旋转捕捉您不希望在网页页面网页页面的顶部或底端进行一切其他旋转,这会使访问者感觉疑虑。原文中将针对在网页页面网页页面顶部或底端处理旋转弹跳时遇到的难点确立明确提出一些解决方案计划方案。

我第一次遇到这种伤害

当我们们升級我真长期以前建立的网站时,我非常先注意赶到这种具体实际效果。你可以以以在这里里里查寻网站。网页页面网页页面底端的页脚理应固定不动没动在网页页面网页页面底端的位置,根本不可易移动。同时,您理应能够在网页页面网页页面的重要内容中往上和向下旋转。理想化化情况下,它会像那般工作中中:

旋转在macOS上的Firefox中弹跳。(大访问)

它目前在Firefox中或在没有碰触屏或触碰板的设备机器设备上的一切浏览器内以这种方式工作中中。但是,那时候候我都在MacBook上运用Chrome。当我们们发现一个网站无法一切一切正常工作中中时,我运用触碰板旋转到网页页面网页页面底端。你可以以以看到这儿造成了什么:

旋转在MacOS上的Chrome中弹跳。(大访问)

不大好了!我认为是理应造成的事情!我依据将其CSS position特点设置为标值,将页脚的位置设置在网页页面网页页面底端fixed。这也是再度思索的好机遇position: fixed;。根据CSS 2.1规范,当“小小盒子”(在这里里种情况下,深蓝色色色页脚)被固定不动没动时,它“相对性性于视口固定不动没动,旋转时不移动。”这喻意着页脚是假如你往上和向下旋转网页页面网页页面时不能该移动。当我们们看到Chrome上造成的事情时,这要我很忧虑。

便于使原文中更加详尽,我将向您呈现如何在下面的Mobile Edge,Mobile Safari和Desktop Safari上旋转网页页面网页页面。这与在Firefox和Chrome上旋转时造成的情况不一样。期待这能让您更强当然自然地理解目前完全一样的编号如何以不一样的方式工作中中。目前,开发设计设计方案没有同Web浏览器中以一样方式工作中中的旋转是一项挑战。

旋转在macOS上的Safari中弹跳。iOS上的Edge和Safari还能够看到相仿的具体实际效果。(大访问)

寻找解决方案计划方案

我的第一个想法是,在所有浏览器上边可以轻轻地松松方便快捷位于理此难点。这喻意着我认为我可以找寻一个解决方案计划方案,它将务必几行CSS编号并且不可易涉及到到一切JavaScript。因此,我做的第一件事就是尝试进行这一整体总体目标。我用于检验的浏览器包括macOS和Windows 10上的Chrome,Firefox和Safari,以及iOS上的Edge和Safari。这类浏览器的版本号号是撰写原文中(2018)时的全新升级版本号号。

HTML和CSS Only解决方案计划方案毫无疑问和相对性性精确精准定位

我尝试过的第一件事就是运用毫无疑问和相对性性精确精准定位而精准定位页脚,因为我习惯性性于像那般建立页脚。我的想法是将我的网页页面网页页面设置为100%高度,有利于页脚从始至终位于于网页页面网页页面底端,具有固定不动没动的高度,而内容占据100%减去页脚的高度,您可以旋转它。或者,您可以设置padding-bottom而其实不是运用calc并将body-container高度设置为100%,有利于应用程序的内容不与页脚重叠。CSS编号看起来像那般:

html {
 width: 100%;
 height: 100%;
 overflow: hidden;
 position: relative;}body {
 width: 100%;
 margin: 0;
 font-family: sans-serif;
 height: 100%;
 overflow: hidden;}.body-container {
 height: calc(100% - 100px);
 overflow: auto;}.color-picker-main-container {
 width: 100%;
 font-size: 22px;
 padding-bottom: 10px;}footer {
 position: absolute;
 bottom: 0;
 height: 100px;
 width: 100%;}
复制

该点理方案计划方案的工作中我国法与原始解决方案计划方案大部分一样(仅此而已position: fixed;)。与此比照,这里理方案计划方案的一个优点是旋转其实不是针对所有网页页面网页页面,仅仅针对没有页脚的网页页面网页页面内容。这种方法的很大难点是在Mobile Safari上,页脚和应用程序的内容同时移动。这促进这种方法在快速旋转时十分不大好:

毫无疑问和相对性性精确精准定位。

我不会会要想的此外一个具体实际效果最开始无法注意到,我只是意识到它是在尝试很多解决方案计划方案之后造成的。它是旋转浏览应用程序内容的速度稍慢。因为大伙儿将旋转容器的高度设置为自身的100%,这会阻止iOS上的依据日本动漫/动量的旋转。倘若100%高度较短(例如,当2000px的100%高度变为100%高度900px时),依据动量的旋转越来越越更糟。当您用劲指轻弹碰触屏表面并且网页页面网页页面自动式旋转时,会造成轻弹/依据动量的旋转。在我的情况下,我认为要依据动量的旋转造成,有利于顾客可以快速旋转,因而我避免设置高度为100%的解决方案计划方案。

其他尝试

互连在网上建议的解决方案计划方案之一,以及我尝试在我的编号上运用的解决方案计划方案,下列所显示信息。

html {
 width: 100%;
 position: fixed;
 overflow: hidden;}body {
 width: 100%;
 margin: 0;
 font-family: sans-serif;
 position: fixed;
 overflow: hidden;}.body-container {
 width: 100vw;
 height: calc(100vh - 100px);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;}.color-picker-main-container {
 width: 100%;
 font-size: 22px;
 padding-bottom: 10px;}footer {
 position: fixed;
 bottom: 0;
 height: 100px;
 width: 100%;}
复制

此编号能用于macOS上的Chrome和Firefox,与以前的解决方案计划方案一样。此方法的一个优点是旋转不但仅限于100%高度,因此依据动量的旋转可以一切一切正常工作中中。但是,在Safari上,页脚会消散:

在macOS Safari上欠缺页脚。(大访问)

在iOS Safari上,页脚变短,底端有一个额外的透明(或乳乳白色)间隙。此外,旋转到最少部后,旋转网页页面网页页面的功效也会丢失。您可以在这里里看到页脚底方的乳乳白色间隙:

iOS Safari上更短的页脚。

您可能见面到很多趣味性的编号:-webkit-overflow-scrolling: touch;。这背后的想法是它允许给定原素的依据动量的旋转。在MDN文字文本文档中,此特点被描述为“非标准准准”和“沒有标准导轨上”。它在Firefox和Chrome中检查时显示信息信息内容为“无效的特点值”,并且它在Desktop Safari上没法显示信息为特点。我十分后没有运用这一CSS特点。

便于呈现您可能遇到的解决方案计划方案的此外一个案例以及发过现的不一样结果,我还尝试了以下编号:

html {
 position: fixed;
 height: 100%;
 overflow: hidden;}body {
 font-family: sans-serif;
 margin: 0;
 width: 100vw; 
 height: 100vh;
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;}.color-picker-main-container {
 width: 100%;
 font-size: 22px;
 padding-bottom: 110px;}footer {
 position: fixed;}
复制

这实际上能用于不一样的桌面上上浏览器,依据动量的旋转仍然有效,页脚固定不动没动在底端,不可易在桌面上上Web浏览器上移动。也许这一解决方案计划方案中最是个难题的一一部分(以及它的不同寻常的地区在于),在iOS Safari上,页脚一直会轻微摇晃和曲解,常常旋转时你都可以以以看到它下面的内容。

JavaScript解决方案计划方案

在运用HTML和CSS尝试一些初始解决方案计划方案之后,我尝试了一些JavaScript解决方案计划方案。我认为弥补一点,它就是我不容易建议你做的事情,最好避免那般做。根据我工作工作经验,一般运用HTML和CSS来提供更清雅和简洁的解决方案计划方案。但是,我早就花了很多时间尝试其他解决方案计划方案,我认为快速查寻不是是有一些运用JavaScript的替代解决方案计划方案实际上不容易出現什么缺点。

碰触恶变恶性事件

一个方式解决旋转弹跳的难点是防止touchmove或touchstart恶变恶性事件上window或document。这背后的想法是阻止所有会话框上的碰触恶变恶性事件,同时允许您要想旋转的内容上的碰触恶变恶性事件。那般的编号案例下列所显示信息:

// Prevents window from moving on touch on older browsers.window.addEventListener( touchmove , function (event) {
 event.preventDefault()}, false)// Allows content to move on touch.document.querySelector( .body-container ).addEventListener( touchmove , function (event) {
 event.stopPropagation()}, false)
复制

我尝试了许多此编号的变体,试着让旋转一切一切正常工作中中。避免touchmove上window没有什么区别。运用document没有区别。由于我尝试过运用touchstart和touchmove控制旋转,但这二种方法也没有区别。我把握到,event.preventDefault()源于于特点原因,你未能再那般讲过。您尽量在恶变恶性事件侦听器中设置passive挑选项false:

// Prevents window from moving on touch on newer browsers.window.addEventListener( touchmove , function (event) {
 event.preventDefault()}, {passive: false})
复制书本馆

你可以以能会遇到一个全名是“iNoBounce”的库,它是便于“阻止你的iOS webapp在旋转时弹跳。”现如今运用这一库解决我都在原文中中描述的难点时要要注意的一点是它务必你运用-webkit-overflow-scrolling。另外务必注意的是,我十分终得到的更简洁的解决方案计划方案(稍后将对其进行描述)与iOS上的解决方案计划方案相仿。您可以依据查寻其GitHub存储库文档的案例并将其与我十分终得到的解决方案计划方案进行比较来源于于行检验。

过量本人个人行为

在尝试了所有这类解决方案计划方案后,发过现了CSS特点overscroll-behavior。该overscroll-behaviorCSS特点是在Chrome 63上进行2017年十二月,并在Firefox 59在2018三月。如MDN文字文本文档中常会述,此特点 “允许您控制浏览器的旋转外流本人个人行为 - 作为到旋转地域的界线情况下造成什么。”它就是我十分终运用的解决方案计划方案。

我需要做的就是设置overscroll-behavior到none在body一个网站,我可以离开页脚的position作为fixed。就算依据动量的旋转应用于所有网页页面网页页面,而其实不是没有页脚的内容,这一解决方案计划方案一件事来说充裕好,并且在哪儿个时间点考虑到了我的所有要求,并且我的页脚已出不来现出现意外地在Chrome上反跳。注意到Edge现如今将此特点标志为早已开发设计设计方案里将会很合理。overscroll-behavior倘若浏览器还兼容问题它,可以看作是提升功效。

結果

倘若您不希望固定不动没动页眉或页脚在网页页面网页页面上反跳,则现如今可让用overscroll-behaviorCSS特点。

尽管这里理方案计划方案没有同浏览器中的工作中我国法不一样(在Safari和Edge上仍然会造成网页页面网页页面内容的弹跳,而在Firefox和Chrome上却没有),但当您旋转到顶部时,它将保持页眉或页脚的固定不动没动或网站的底端。它是一个简洁的解决方案计划方案,在所有检验的浏览器中,依据动量的旋转仍然有效,因此您可以十分快速地旋转浏览许多网页页面网页页面内容。倘若要在网页页面网页页面上构建固定不动没动的页眉或页脚,则可以一开始运用这里理方案计划方案。

广州市市企业网站建设


2019.10.12

广州市市企业公司企业网站建设:一个时尚潮流时尚博主的“Off-Publishing”主题风格主题活动


选择您希望网站做成品的设计方案设计风格爱好,要大家依据精确的分析与选择,为您明显强烈推荐合适的款式有效合理布局,
因而,您可以节省最基本的沟通交流沟通交流时间,
要大家把较为比较有限的时间,充裕的用在对生产制造制造行业的分析及您企业的自身分析上吧

广州市市企业网站建设:依据内部联接提高网页访问量

广州市市企业公司企业网站建设:一个时尚潮流时尚博主的“Off-Publishing”主题风格主题活动

广州市市设计网页:在Photoshop中建八局立一个干净整洁的blog主题风格设计风格

广州市市企业建设网站:一开始运用Fullstack Web开发设计设计方案


慕枫互连网崇敬极简的设计方案计划方案关键核心理念,是一家增涨端路线的广州市市公司企业网站建设,广州市市企业网站建设,广州市市网站建设公司,广州市市创建网站就找慕枫,您最好的选择。

"> 对不起,没有下一图集了!">
在线咨询