重庆网站搭建哪里可以做,常州网站制作哪家好,企业培训图片,网络推广求职招聘交流群不同浏览器滚动条样式及滚动定位
是否可以滚动 overflow#xff1a;scroll
overflow#xff1a;autooverflow:scroll – 只有超出了盒子才会有滚动条
overflow:auto – 一直有滚动的盒子#xff0c;只是超出了盒子才会出现滚动条滑块#xff0c;可以滚动
谷歌浏览器滚动…不同浏览器滚动条样式及滚动定位
是否可以滚动 overflowscroll
overflowautooverflow:scroll – 只有超出了盒子才会有滚动条
overflow:auto – 一直有滚动的盒子只是超出了盒子才会出现滚动条滑块可以滚动
谷歌浏览器滚动条样式设置
针对webkit内核的浏览器使用伪类来改变滚动条的默认样式
伪元素选择器说明用法::-webkit-scrollbar滚动条整体部分width设置为0来隐藏滚动条::-webkit-scrollbar-thumb滚动条滑块背景色、颜色修改::-webkit-scrollbar-track滚动条的轨道::-webkit-scrollbar-button滚动条的轨道的两端按钮点击它也可以滚动 ::-webkit-scrollbar {width: 10px; //滚动条的宽度设置}::-webkit-scrollbar-thumb {background-color: rgb(59, 182, 225); //滚动条滑块颜色transition: all 0.2s;border-radius: 6px;}::-webkit-scrollbar-thumb:hover {background-color: #2b85e0;}::-webkit-scrollbar-track {background-color: #f5f5f5; // 滑道的背景色}::-webkit-scrollbar-button {height: 6px;background-color: #ccc;}火狐浏览器的滚动条样式设置
火狐64以上版本都支持2018.11 出的 64 版本
scrollbar-width
属性值宽度说明auto17px默认值thin8px宽度比较小none0不显示滚动条但是仍可以滚动
scrollbar-color
属性值说明auto默认状态#226ec2 white第一个颜色为滚动滑块的颜色第二个为滑道的颜色只设置一个还不生效
滚动到指定位置
1》scrollTo()
如果没生效试试给出现滚动条的盒子添加相对定位
基本使用
element.scrollTo({top: 100,left: 100,behavior: smooth,
});behaviorsmooth 表示平滑滚动并产生过渡效果、instant 表示滚动会直接跳转到目标位置没有过渡效果。auto自动选择滚动效果
behavior的兼容性相对差一点
2》scrollTop
基本使用
el.scrollTopnumber将html滚动到最顶部
document.documentElement.scrollTop 0;优点就是兼容性好 css属性scroll-behavior:smooth也可以设置平滑滚动可以搭配着它们一起使用
3》scrollIntoView
滚动元素的父容器使被调用 scrollIntoView()的元素对用户可见 document.querySelector(.test).scrollIntoView();配置
element.scrollIntoView({ behavior: smooth, block: end, inline: nearest });optionvalue说明behaviorsmooth平滑滚动 instance直接滚动到位 auto自动平滑还是一步到位blockstart/center/end/neareststart是默认值元素上边缘与视口对齐垂直方向对齐方式inline可选值block的一样nearest是默认值水平方向对齐方式
