首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

css笔记 - 张鑫旭css课程笔记之 overflow 篇

子元素不超出也会有滚动条的那条轨道。 auto:如果超出,滚动显示。如果不超出,也不会有滚动条的位置。 inherit:ie8+,继承元素的overflow属性值。...内容尺寸超出了容器尺寸的额限制 滚动条的宽度机制 滚动条会占用容器的可用宽度或高度 IE7/Chrome/FireFox(Win7)下都是17像素 滚动条与body/html关系 无论什么浏览器,默认滚动条均来自...document.body.scrollTop || document.documentElement.scrollTop; overflow的padding-bottom缺失现象:(非chrome) 即,如果元素中内容高度超出出现滚动条...、所以形成BFC的元素可以清除浮动带来的影响,不然的话,子元素浮动,元素塌陷,元素的兄弟元素会和元素的子元素重叠,就违背了bfc的初衷,所以要清除浮动带来的影响。...(形成bfc结界,与外界隔绝) 仅支持ie7+及现代浏览器 避免margin穿透/重叠问题(形成bfc结界,与外界隔绝) 两栏自适应布局 overflow与absolute 隐藏失效 即overflow

2.8K10

duilib里面隐含的一个可能递归的bug

duilib的容器的滚动条是根据子控件来判断是否展示的。如果控件可以根据情况在SetPos里面动态调整子控件的大小,在这个条件下,存在这样一种情况: 1.滚动条一开始不展示。...2.容器控件SetPos里面自动计算出子控件需要展示滚动条,ProcessScrollBar里面展示了滚动条并重新调用SetPos来重新计算子控件位置。...3.滚动条展示后,SetPos里面重新调整了子控件的大小,计算了滚动范围等,ProcessScrollBar里面发现新的子控件大小算出来的范围又不需要滚动条了,于是不展示滚动条,并再次调用SetPos来重新计算子控件位置...修复办法(两种): 1.可以尝试在Setpos里面来继续根据cyNeed判断是否展示滚动条,然后直接把滚动条是否展示给设置好,这样到ProcessScrollBar里面不会形成递归。...2.ProcessScrollBar里面修改,避免SetPos(GetPos())这样的代码,改为调用NeedUpdapte这样的来触发重绘来重新进入SetPos计算,避免递归调用。

65510

9个工作日常中非常实用的CSS技巧,一定要进来瞧瞧

你可以将 CSS scroll-behavior 属性与 html一起用作选择器,启用整个 HTML 页面的平滑滚动。 ?...不要忘记设置 display:grid; 对于元素,然后使用 place-items 属性。 ? 7)、 自定义滚动条 默认滚动条对用户没有吸引力,你可以做的是自定义此滚动条。 ?...我们只用 CSS 就能做到这一点,如果你想在跨浏览器上获得全面支持,最好使用 JavaScript 库来制作滚动条。 ?...8) 、禁用用户选择 有时,你不想让用户选择复制你网页上面的某些内容,此时,你可以选择使用禁止用户选择复制内容的功能。就算用户选中了内容,但是依然不能复制所选的内容。 样式效果如下: ?

1.4K30

记一次Layer管理遇到的Bug及其相关问题的探索

继续细看上图的Paint count 是随着滚动而变化的 ,但是内存占用0B , 其理由理由是layerForVerticalScrollBar , 等等 , 你再看看 , 页面是不是没有出现滚动条?...对啊 , 我已经通过下面这个来禁用了 *::-webkit-scrollbar{ display: none; } 这就是说明即便禁用滚动条还是会发生paint还有compsitie 虽然通过添加will-change...未解问题2 这里可以看到 , 开头一些的::after生成的横线并没有合并起来 , 但是后面的确合并了...还有当点击右边滚动条会发现后面会出现一部分的layer又合并了....但是这个页面却没有触发整个页面的重回...这里就很好的体现有view model的好处了......唉 ------2017/8/8更新, 找到更好的解决办法了---------- 横线是使用position:absolute画的 , 不跟滚动的原因是因为容器没有加

737100

记一次Layer管理遇到的Bug及其相关问题的探索

继续细看上图的Paint count 是随着滚动而变化的 ,但是内存占用0B , 其理由理由是layerForVerticalScrollBar , 等等 , 你再看看 , 页面是不是没有出现滚动条?...对啊 , 我已经通过下面这个来禁用了 *::-webkit-scrollbar{ display: none; } 这就是说明即便禁用滚动条还是会发生paint还有compsitie 虽然通过添加will-change...未解问题2 这里可以看到 , 开头一些的::after生成的横线并没有合并起来 , 但是后面的确合并了...还有当点击右边滚动条会发现后面会出现一部分的layer又合并了....但是这个页面却没有触发整个页面的重回...model的好处了......唉 ---- ------2017/8/8更新, 找到更好的解决办法了---------- 横线是使用position:absolute画的 , 不跟滚动的原因是因为容器没有加

49420

jQuery入门教程-CSS样式操作大全

(1)返回匹配元素相对于元素的位置(偏移)。 (2)该方法返回的对象包含两个整型属性:top 和 left,像素计。 (3)此方法只对可见元素有效。 12、返回水平滚动条位置 ?...(1)滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0。 13、设置水平滚动条位置 ? 参数 描述 position 可选。规定像素计的新位置。...14、返回滚动条垂直位置 ? (1)只返回第一个匹配元素的滚动条的垂直位置。 (2)scroll top offset 指的是滚动条相对于其顶部的偏移。...(3)如果该方法未设置参数,则返回像素计的相对滚动条顶部的偏移。 (4)该方法对于可见元素和不可见元素均有效。 15、设置滚动条垂直位置 ? 参数 描述 offset 可选。...规定相对滚动条顶部的偏移,像素计。 (1)设置所有匹配元素的 scroll top offset。 (2)该方法对于可见元素和不可见元素均有效。 16、返回高度 ?

1.2K30

移动Web学习笔记

继续滚动的速度和持续的时间和滚动手势的强烈程度成正比 10. pointer-events: none 解释:当鼠标点击设置了pointer-events: none属性的标签时,标签不起作用,会出现类似于标签的禁用效果点击此处查看详细解释...相对于当前对象内文本的字体尺寸 当em作为font-size的单位时,表示相对于元素的font-size的倍数 例如:元素的font-size的值为 16px 如果子元素的font-size: 2em...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条...两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 15.... *解释:使用制作搜索框,当在手机上点击搜索框时会弹出一个软键盘,软键盘上的enter按钮会搜索按钮的形式显示 27

1K30

js、jQuery 获取文档、窗口、元素的各种值

; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(其他浏览器): document.body.scrollLeft; 获取水平滚动条到左边的水平宽度 (即网页被卷左去的宽度)(ie浏览器):...document.documentElement.scrollLeft; 滚动条中内容的高度:boxx.scrollHeight;//利用这个可以使滚动条一直在底部 网页正文部分上: window.screenTop...获取元素的宽度:offsetWidth;(width+padding+border) 获取元素的高度:offsetHeight;(height+padding+border) 获取元素最左边距已定位的级对象的长度...(若无父级对象或级对象没有定位,就是距离文档顶部):offsetLeft 获取元素最上边距已定位的级对象的长度(若无父级对象或级对象没有定位,就是距离文档左端):offsetTop 屏幕分辨率的高...在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素,计算鼠标与其的偏移值, 找到元素的border的左上角的外交点作为相对点。

14.1K32

一文搞懂 JavaScript 中 DOM 相关的距离

) textarea.offsetLeft = 10(元素左外border距离元素左内border的距离) 当我把滚动条加上的时候: textarea.clientWidth = 200(可见区域...= 6(border-left) textarea.scrollLeft = 0(横向滚动条滚动的距离) textarea.offsetLeft = 10(元素左外border距离元素左内border...) textarea.offsetLeft = 10(元素左外border距离元素左内border的距离) 由于每次打开时,滚动条的位置不变,所以我需要 js 设置滚动滚动条的时候,看每个值的变化...它指的是距离当前元素最近的定位元素(position != static),这个定位元素就是我们计算所有offset属性的参照物。...(简单来说就是元素相对元素左边的距离) offsetTop:元素上外边框距离元素上内边框的距离(简单来说就是元素相对元素上边的距离) 下面有张图对上面的内容进行了总结,并给出了不同浏览器下的兼容性

1.4K31

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。...接下来讨论出现有滚动条时的情况: 当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时: scrollHeight: 因为子元素比元素高,元素不想被子元素撑的一样高就显示出了滚动条...在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。...scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。...offsetTop: 当前元素顶部距离最近元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。 offsetTop: 当前元素顶部距离最近元素顶部的距离,和有没有滚动条没有关系。

1K30

css元素溢出 overflow

仅供学习,转载请注明出处 css元素溢出 当子元素的尺寸超过元素的尺寸时,需要设置元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。...3、scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 4、auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。...从上面的结果来看,直接隐藏了起来固然是好,但是有时候能不能设置为滚动条,可以下拉看看呢? 用scroll来设置滚动条 ?...可以从上面看出有两条滚动条,很明显下方的滚动条是不需要的,如果只要一边的滚动条就好了,该怎么做呢? 用auto来自动判断设置滚动条 ?...可以看出,只有右边有滚动条了,因为判断只有下方有溢出部分,所以只要有右边滚动条就可以往下拖拉查看了。

3.4K20

EasyDSS流媒体平台视频直播时分屏显示出现播放器抖动情况排查

image.png 由于后端的代码没有问题,因此我们猜测可能是前端代码层级造成的,经过对前端代码层级的分析发现,播放器盒子刚好在有滚动条和无滚动条之间,播放器盒子出现滚动条滚动条出现将盒子内的播放器缩小...,播放器缩小后父盒子不需要拉伸,所以出现播放时盒子抖动。...盒子的属性分为以下两种,分别为overflow:auto及overflow:scroll,两种区别如下: overflow:auto; :内容撑开显示滚动条滚动条显示在元素内 overflow:scroll...; :内容撑开显示滚动条滚动条显示在元素外,不占用盒子宽高 在该问题内,将盒子属性为overflow:auto才造成了播放器的抖动,因此我们修改为overflow:scroll即可解决该问题。

61950

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。 ?...接下来讨论出现有滚动条时的情况: 当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时: scrollHeight: 因为子元素比元素高,元素不想被子元素撑的一样高就显示出了滚动条...在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。 ?...scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。 ?...offsetTop: 当前元素顶部距离最近元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。 ?

3.2K50
领券