开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当子元素位于父元素上方时，safari不会滚动

当子元素位于父元素上方时，Safari浏览器在滚动时可能会出现问题。这是因为Safari浏览器在处理滚动事件时存在一些特殊的行为。

在Safari浏览器中，当子元素位于父元素上方时，如果子元素具有滚动行为（例如设置了overflow属性为scroll或auto），则滚动事件会被子元素捕获，而不会传递给父元素。这导致当用户尝试在子元素上滚动时，父元素不会滚动。

这种行为可能会导致用户体验上的问题，特别是在需要整个页面滚动的情况下。为了解决这个问题，可以尝试以下方法：

使用JavaScript：通过JavaScript监听子元素的滚动事件，并将滚动事件传递给父元素。可以使用addEventListener方法来监听子元素的滚动事件，并在事件处理程序中调用父元素的scrollTo方法来实现滚动。
使用CSS属性：尝试使用CSS属性来解决这个问题。可以尝试将子元素的overflow属性设置为hidden，然后使用其他方式来模拟滚动效果，例如使用transform属性来实现滚动效果。

需要注意的是，以上方法只是一种解决方案，并不能保证在所有情况下都能完全解决Safari浏览器中的滚动问题。因此，在开发过程中，建议进行充分的测试和兼容性验证，以确保在不同浏览器和设备上都能正常工作。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs

相关搜索:当子元素大于父元素时，如何将子元素放在父元素的上方/下方居中(加上旋转)？子元素垂直居中，但当子元素溢出时允许父元素扩展当父元素有click事件时，角度子元素的change事件不会触发当某些输入位于父元素内时访问nextSibling 当父元素悬停时，如何更改子元素的背景？当父元素具有具有特定属性和特定值的其他子元素时，向父元素添加子元素 Flexbox不会垂直居中父元素的子元素 React |当子元素具有类时更改父元素的样式在safari浏览器中，子元素不会占据父元素的焦点最大高度转换使子元素始终位于父元素的底部当光标离开子元素悬停父元素时，如何防止鼠标悬停在父元素上？当父元素和子元素具有不同的%宽度时，如何使子div居中 Material UI:父元素悬停时显示子元素当父元素有动画时，我如何设置子元素为无动画？当父容器元素有溢出滚动时，这有可能使子dom元素有可见的溢出吗？当父状态更新时，子道具不会当#节位于页面顶部时显示元素使元素在父级滚动时成为粘性元素当光标位于固定目录上时，页面不会滚动在safari中如何滚动SVG子元素进入视图？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

子元素滚动，父元素不滚动

这个是为了处理在bootstrap框架中的iframe 滚动条的问题，查找到的解决方案小tip: 子元素scroll父元素容器不跟随滚动JS实现演示页面代码 CSS代码： .test {...delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动...，因此，临界时候手动边界滚动定位 this.scrollTop = delta > 0?

4K3 0

【CSS】鼠标移动到元素上方显示移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

一、鼠标移动到元素上方显示 / 移出盒子范围隐藏案例要点分析 ---- 1、子绝父相这里要在一个 div 盒子上方套一层遮罩 , 遮罩就需要使用绝对定位将其覆盖到其它元素中 ; 子元素使用了绝对定位..., 父元素必须使用相对定位 ; 2、显示隐藏元素对象使用 display: none; 样式隐藏元素 , 使用 display: block; 样式显示元素 ; 3、鼠标经过样式设置鼠标经过...链接时 , 显示链接中的 one 元素 , 需要使用如下选择器进行设置 ; /* 鼠标经过时 one 作为遮罩显示出来 */ .box a:hover .one { /* 设置显示元素...DOCTYPE html> 鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 /* 最外层的父容器元素 */ .box { /* 子绝父相 : 子元素需要使用绝对定位相互覆盖父元素必须设置相对定位 */ position

2.8K3 0

CSS 定位详解

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。...它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed...} 上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位，保持与视口顶部20px的距离...5.1 堆叠效果堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。下面是一个图片堆叠的例子，下方的图片会随着页面滚动，覆盖上方的图片（查看 demo）。 ?

1.8K4 0

CSS 定位详解

这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。...relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。...它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed...} 1 2 3 4 5 复制上面代码中，页面向下滚动时，#toolbar的父元素开始脱离视口，一旦视口的顶部与#toolbar的距离小于20px（门槛值），#toolbar就自动变为fixed定位...# 5.1 堆叠效果堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。下面是一个图片堆叠的例子，下方的图片会随着页面滚动，覆盖上方的图片（查看 demo ）。

1.7K1 0

pointer-events用法

直译为指针事件，当把值设置为none后，他有如下相关特性。...继承性：有动画性：否计算值：指定值 ---- 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。...如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。...当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。对应的脚本特性为pointerEvents。...canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面

1.4K3 0

一文彻底搞懂js中的位置计算

本质上就是当元素出现滚动条时，判断当前元素出现的高度 + 滚动条高度 = 元素本身的高度(包含隐藏部分)。...相信使用过offest的同学对这个属性深有体会，它是相对于父元素的左边/上方的偏移量。...注意是触发元素也就是 e.target，额外小心如果事件对象中存在从一个子元素当移动到子元素内部时，e.offsetX/Y 此时相对于子元素的左上角偏移量。...我们来看看这张图: 计算元素距离 body 的偏移量当我们需要获得元素距离 body 的距离时，但是又无法确定父元素是否存在定位元素时(大多数时候在组件开发中，并不清楚父节点是否存在定位)。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。

3.8K1 0

Android之布局详解

android:scrollbarSize 设置滚动调大小 android:fadingEdge 设置拉滚动条时 ,边框渐变的放向 android:drawingCacheQuality 设置绘图时半透明质量...android:layout_above属性可以让一个空间位于另一个控件的上方，需要为这个属性指定相对控件id的引用，这里我们填入了@id/button3，表示让该控件位于Button3的上方。...注意：当一个控件去引用另一个控件的id时，该控件一定要定义在引用控件的后面，不然会出现找不到id的情况。...，填满其应该所占的格子 fill_vertical 仅垂直方向上拉伸填充 fill_horizontal 仅水平方向上拉伸填充 clip_vertical 垂直方向上裁剪元素，仅当元素大小超过格子的空间时...clip_horizontal 水平方向上裁剪元素，仅当元素大小超过格子的空间时注意使用layout_columnSpan 、layout_rowSpan时要加上layout_gravity属性

2K1 0

从 antDesign 来窥探移动端“滚动穿透”行为

比如上方图片中有两个元素，一个为红色边框存在滚动条的父元素，另一个则为蓝色边框黑色背景不存在滚动条的子元素。当我们拖动不可滚动的子元素时，实际会意外造成父元素会跟随滚动。...将可滚动元素拖动至顶部或者底部时，继续拖动触发最近可滚动祖先元素的滚动。还有另一种常见场景，我们在某个可滚动元素上进行拖动时，当该元素的滚动条已经到达顶部/底部。...继续沿着相同方向进行拖动，此时浏览器会寻找当前元素最近的可滚动祖先元素从而意外触发祖先元素的滚动。同样，动画中红色边框为拥有滚动区域的父元素，蓝色边框为父元素中同样拥有滚动区域的子元素。...我们在子元素区域内进行拖拽时，当子元素滚动到底部（顶部）时，仍然继续往下（上）进行拖动。原理上述两种情况相信大家也日常业务开发中碰到过不少次。...手册上仅仅明确了，滚动事件的 Target 可以是 Document 以及里边的 Element ，当 Target 为 Document 时事件会发生冒泡，而 Target 为 Element 时并不会发生冒泡

5332 0

css学习笔记，持续记录。

flex-shrink，默认为1，所有子元素的长宽超出父元素时的缩放占比（超出的长宽除以所有子元素的shrink加起来的数量，就是单份缩放的大小，为0时代表不进行缩放） flex-grow，默认为0，所有子元素的长宽超出父元素时的缩放占比...：设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。取值参见。：设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。...35. fixed fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。...解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题解决子级元素外边距会使父级元素塌陷的问题 42. ul list-style失效默认情况下ul下的li都会自带一个列表样式，如果个ul...但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获

2.7K6 0

事件

} }); 需要注意的是，Safari之外的所有浏览器都会通过元素来反映这一变化，Safari是基于跟踪滚动位置。...事件说明 blur 在元素失去焦点时触发，不会冒泡 focus 在元素获得焦点时触发，不会冒泡 focusin 在元素获得焦点时触发，会冒泡 focusout 在元素失去焦点时触发，会冒泡当焦点从页面中的一个元素移动到另一个元素...；这个事件不冒泡，而且在鼠标移动到后代元素上不会触发；DOM3被纳入标准； mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发；这个事件不冒泡，而且在鼠标移动到后代元素上不会触发；DOM3...被纳入标准； mousemove 鼠标指针在元素内部移动时重复地触发； mouseout 鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。...移入的另一个元素可能位于元素外部，也可能使其子元素。 mouseover 鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。 mouseup 用户释放鼠标按钮时触发。

3.3K5 1

JavaScript的事件

UI事件 load 当页面完全加载后再window上触发，当所有框架加载完毕时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在触发 unload...>）中的一个或多个字符时 resize 当浏览器窗口被调整到一个新的高度或者宽度时，会触发 scroll 当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发...任意鼠标按钮按下时触发 mouseup 释放鼠标按钮触发 mousemove 鼠标在元素内部移动的时候重发触发 mousewheel 滚轮事件 mouseover 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发...【不支持子元素】 mouseout 在位于元素上方的鼠标光标移入到另外一个元素中。...【支持子元素】在被选元素上与mouseleave效果相同 mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡【不支持子元素】 4.

1.5K3 0

微信H5页面兼容性解决方案

1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。...出现原因分析：通常我们习惯用height属性设置行间的高度和line-height属性设置行间的距离（行高），当点击输入的时候，光标的高度就自动和父盒子的高度一样了。...（谷歌浏览器的设计原则，还有一种可能就是当没有内容的时候光标的高度等于input的line-height的值，当有内容时，光标从input的顶端到文字的底部解决办法：高度height和行高line-height...MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常问题详情描述： ios当前页面分享给好友，点击进来是正常

3.4K4 3

定位(position)

fixed 固定定位，相对于浏览器窗口进行定位静态定位(static) 静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。...相对定位relative 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...可以得出如下结论：因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。父盒子布局时，需要占有位置，因此父亲只能是相对定位. 这就是子绝父相的由来。...它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。...叠放次序（z-index）当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

1.3K3 0

纯滚动怎么理解_scrollview不滚动

，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性　　[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight...但是由于各个浏览器表现不一样，分为以下几种情况　　【1】html元素没有滚动条时，IE和firefox的client和scroll属性始终相同，且返回可视区的尺寸大小；而safari和chrome表现正常...) 　　【2】html元素存在滚动条时，各个浏览器都表现正常。...元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度 scrollLeft 　　scrollLeft属性表示被隐藏在内容区域左侧的像素数...元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度　　当滚动条滚动到内容底部时，符合以下等式 scrollHeight

1.9K2 0

CSS总结

一、CSS特性　　1.继承：子元素继承父元素的某些样式（因为有些元素有默认值，所以它们就不用继承父元素的）。　　　...优点是不再单独为父元素包含的子元素进行设置id使得css代码更加简化，优化了css代码！...　　[6]:当父元素没有指定高度并且子元素有浮动时，这个父元素的高度不会自动增加. [7]:在给盒子的父盒子加居中时，一定要有宽度才能使得父盒子居中....　　[8]:当有浮动元素有与浮动方向一样的外边距时，在IE6中会出现双倍间距的现象，解决方法是：给此元素加：display：inline;就可以很好的解决....十、部分CSS样式详解　　1.CSS溢出　功能：设置当对象的内容超过其指定高度及宽度时如何显示　　　　　语法：Overflow:visible(默认值，不剪切内容，也不添加滚动条)

2.1K1 0

前端面试01-HTML+CSS

解决办法：设置块状格式化上下文元素（ float/position:absolute等）,或设置其中一个元素的margin （ 2 ）父级和第一个 / 最后一个子元素的 margin 合并。...；自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。...因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 sticky 粘性定位(而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。...当滚动到父元素不在可视区域范围内时，定位效果就会消失。) static 默认值。没有定位，元素出现在正常的流中 10.display:inline-block 什么时候不会显示间隙？...将子元素放置在同一行为父元素中设置font-size: 0，在子元素上重置正确的font-size 为inline-block元素添加样式float:left 设置子元素margin值为负数 11.你对

6762 0

CSS布局(三) 布局模型

在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。...由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响...div定义了定位属性，子div就会跟着父div的位置去再定位 4.说一下z-index 4.1简单演示利用z-index，可以改变元素相互覆盖的顺序。...4.3父子关系处理如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方 <div style="position:relative;width:200px;...z-index比<em>父</em><em>元素</em>小，但是<em>子</em><em>元素</em>仍然出现在<em>父</em><em>元素</em><em>上方</em> ?

2.3K7 1

JavaScript DOM元素尺寸和位置

； 3.增加外边据，无变化； 4.增加滚动条，无变化，不会减小； PS：对于元素大小的获取，一般是块级(block)元素并且以设置了CSS大小的元素较为方便。...PS：加上边框和内边距不会影响它的位置，但加上外边据会累加。...box.offsetParent;//得到父元素 PS：offsetParent中，如果本身父元素是，非IE返回body对象，IE返回html对象。...== null) {//如果还有上一层父元素 left += parent.offsetLeft;//把本层的距离累加 parent = parent.offsetParent;//得到本层的父元素 }...box.scrollTop;//获取滚动内容上方的位置 box.scrollLeft;//获取滚动内容左方的位置如果要让滚动条滚动到最初始的位置，那么可以写一个函数： function scrollStart

2.8K7 0

【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

要和带有定位的父容器搭配使用 ; 子元素使用绝对定位 , 父元素要使用相对定位 ; 子元素使用绝对定位 , 在布局中不会保留其位置 , 子元素完全依赖父容器的位置 , 此时就要求父容器必须稳定..., 如果父容器使用了绝对布局 , 父容器就不会保留位置 , 而子元素又依赖父元素 , 这时父元素建议使用相对定位 , 这样能保证页面的稳定性 ; 父级元素需要占位 , 必须使用相对定位 ; 子元素...与滚动条滚动没有任何关系 ; 固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的..., 与右侧的三个按钮 , 就是固定定位元素 , 拖动滚动条并不会改变固定定位元素的位置 ; 低版本浏览器不支持固定定位 , 如 : IE6 浏览器 ; 10、绝对定位元素设置水平...; scroll : 不管子元素是否超出父容器 , 都显示滚动条 ; auto : 如果子元素超出父容器显示滚动条 , 如果子元素没有超出父容器不显示滚动条 ; 效果参考【CSS】清除浮动 ② (

1941 0

知识整理之CSS篇

当出现滚动条时，对象不会随着滚动。 position: sticky（CSS3）粘性定位，该定位基于用户滚动的位置。在常态时,它的行为就像 position:relative，遵循常规流。...当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置，脱离常规流。 position: inherit 从父元素继承 position 属性的值。...float的元素区域重叠计算bfc的高度时，浮动元素也参与计算 bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素具体特性解释，可移步至CSS中的BFC详解什么是 FOUC？...浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠浮动元素的 margin 在垂直方向上也不会发生 margin 折叠，即使和它相邻的子元素也不会...原理：当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭