摘要：前情提要在之前我写过一篇文章浏览器上元素无法滑动解决方法整理，这篇文章写的是，当浏览器上出现大于父容器的元素，想给父容器加上实现内部滚动效果而失败的总结。解决方法反其道而行之。当子元素加载完成时，将包裹元素撑开，父元素便可以自由滚动了。
前情提要
在之前我写过一篇文章：iOS safari浏览器上overflow: scroll元素无法滑动bug解决方法整理，这篇文章写的是，当iOS safari浏览器上出现大于父容器的svg元素，想给父容器加上overflow: scroll实现内部滚动效果而失败的总结。但当时并没有意识到这个问题的实际原理，只是知道了safari给scroll元素加入了原生的scrollView块。
bug原理最近在做一个项目的时候，在safari上遇到了一个其他的bug，却让我意识到了这个问题的终极原因。
项目bug是这样的：我在用Nuxt做一个展示站点，需要使用锚链接在页面刚进入的时候跳转到某个位置。这里我本来使用的是router api提供的scrollBehavior方法，但这个方法在Nuxt上有局限性。我就把实现方式改为：进入页面后，动态计算不同锚点位置的scroll top再设置父元素的scroll位置。
在其他浏览器上都是ok的，但在safari上就出了问题：在页面刚进入时无法正确获取到元素的scroll top，小很多，只有页面加载完成之后才可以。
究其原因，是因为我在页面上放了很多张图片让其自行占位，而在页面刚加载时，其他浏览器会预先获取到图片的大小而给其一个占位，无论图片是否加载完成页面总高度固定的。而safari就不一样，图片没加载成功时高度是0。
图片没加载成功时高度是0。哇长见识了。
这时回想到之前在safari上的那个scroll bug，在查阅相关资料后就可以得出结论了：
safari浏览器在渲染页面元素的时候，会预先走webkit浏览器的渲染流程：
构建DOM tree
构建CSS rule tree
根据DOM和CSS tree来构建render tree
根据render tree计算页面的layout
render页面
注意在第三步和第四步的时候，safari浏览器在构建render tree的时候，会预先找到相应的overflow: scroll元素，在计算页面layout的时候，会计算父元素的高度与子元素的高度，若子元素高于父元素，则在render页面时为其建立一个原生的scrollView。
这个scrollView有什么用的？其实就是为了给其一个弹弹乐的效果（但确实用户体验不错）。
当子元素是某个媒体格式时，比如img、object（svg）等，safari在加载完成之前是不会在计算在layout之内的，也就是高度为0，则子元素的高度就一定小于父元素的高度，safari不会给父元素一个原生的scrollView。
解决方法反其道而行之。当出现这种问题的时候，给子元素一个包裹元素，包裹元素设置一个min-height大于父元素的高度，让父元素有scrollView。当子元素加载完成时，将包裹元素撑开，父元素便可以自由滚动了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113943.html
摘要：前情提要在之前我写过一篇文章浏览器上元素无法滑动解决方法整理，这篇文章写的是，当浏览器上出现大于父容器的元素，想给父容器加上实现内部滚动效果而失败的总结。解决方法反其道而行之。当子元素加载完成时，将包裹元素撑开，父元素便可以自由滚动了。 前情提要 在之前我写过一篇文章：iOS safari浏览器上overflow: scroll元素无法滑动bug解决方法整理，这篇文章写的是，当iOS ...
摘要：而中的网页本身就是一个大的，在脱离文档流的定位时，子元素的高度如果没有在建立之前确定，就不会触发内部滑动，而会触发外部滑动。分析父元素不脱离文档流时，无此。更新此问题的深层原因找到了，详情请见浏览器上元素无法滚动深究 描述 此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scr...
摘要：而中的网页本身就是一个大的，在脱离文档流的定位时，子元素的高度如果没有在建立之前确定，就不会触发内部滑动，而会触发外部滑动。分析父元素不脱离文档流时，无此。更新此问题的深层原因找到了，详情请见浏览器上元素无法滚动深究 描述 此bug出现需要条件：父元素需使用绝对定位absolute或固定定位fixed，使用overflow: scroll / auto（或overflow-y: scr...
摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。 一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...
摘要：一上浏览器使用不允许事件代理到上选择器以上绑定可能会出现点击失效的情况。对于，如果工具是以下版本，在中加入以下代码以上的版本加入以下代码八开发对于文件的处理问题。解决方法有给元素设置绝对定位即可。元素换成内联元素，如。 一、iOS上浏览器使用jQuery不允许事件代理到document上 $(document).on(click, 选择器, function(){}); 以上绑定可能...
阅读 1057·2021-11-12 10:34
阅读 984·2021-09-30 09:56
阅读 667·2019-08-30 15:54
阅读 2601·2019-08-30 11:14
阅读 1464·2019-08-29 16:44
阅读 3202·2019-08-29 16:35
阅读 2489·2019-08-29 16:22
阅读 2440·2019-08-29 15:39
