网站首页> 前端开发> Html/CSS> css中设置滚动条的方法

css中设置滚动条的方法

时间:2022-10-04 21:53:20 阅读:205次 来源:互联网

小编给大家分享一下css中设置滚动条的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

首先我们来看一下css设置滚动条可能需要的属性。

1、overflow-y:设置当对象的内容超过其指定高度时如何管理内容;overflow-x:设置当对象的内容超过其指定宽度时如何管理内容

参数:

  • visible:扩大面积以显示所有内容
  • auto:仅当内容超出限定值时添加滚动条
  • hidden:总是隐藏滚动条
  • scroll:总是显示滚动条

2、height:设置滚动条的高度(修改其后数值即可)。

3、滚动条颜色参数设置:

  • scrollbar-3d-light-color设置或检索滚动条亮边框颜色
  • scrollbar-highlight-color设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色
  • scrollbar-face-color设置或检索滚动条3D表面(ThreedFace)的颜色
  • scrollbar-arrow-color设置或检索滚动条方向箭头的颜色
  • scrollbar-shadow-color设置或检索滚动条3D界面的暗边(ThreedShadow)颜色
  • scrollbar-dark-shadow-color设置或检索滚动条暗边框(ThreedDarkShadow)颜色
  • scrollbar-base-color设置或检索滚动条基准颜色

其次我们来看css设置滚动条样式。

在html页面中我们可以这样定义整个页面的滚动条。

*{
    scrollbar-3dlight-color:#D4D0C8;
    scrollbar-highlight-color:#fff;
    scrollbar-face-color:#E4E4E4;
    scrollbar-arrow-color:#666;
    scrollbar-shadow-color:#808080;
    scrollbar-darkshadow-color:#D7DCE0;
    scrollbar-base-color:#D7DCE0;
    scrollbar-track-color:#;
}

最后我们来看一看css设置滚动条后如何隐藏(横向、竖向)

很多人都说使用overflow-y:hiddencss可以隐藏滚动条,但是只能针对div元素,并不能隐藏浏览器,而一些资料说<boby>里加入scroll="no",可隐藏滚动条;在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;加入style="overflow-y:hidden",可隐藏垂直滚动条。

1、完全隐藏:在里加入scroll="no",可隐藏滚动条;

2、在不需要时隐藏:指当浏览器窗口宽度或高度大于页面的宽或高时,不显示滚动条;反之,则显示;

3、样式表方法:

  • 加入style="overflow-x:hidden",可隐藏水平滚动条;
  • 加入style="overflow-y:hidden",可隐藏垂直滚动条。

最终隐藏方法:

在页面添加

<style>
    html{
        overflow-x:hidden;//隐藏水平滚动条
        overflow-y:hidden;//隐藏垂直滚动条
    }
</style>

以上是“css中设置滚动条的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助

本文地址:https://www.manongw.com/article/409.html

文章来源:码农网

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了HTML中图片不存在显示默认图片的方法示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:07
  • 本文主要介绍了css3字体缩放样式-webkit-text-size-adjust的用法详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:46
  • 本文主要介绍了HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-19 21:50
  • 本文主要介绍了Html中使用自定义图片来实现checkbox显示的方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:13
  • 本文主要介绍了HTML+CSS相对宽度和绝对宽度冲突时的div解决方法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-19 21:54
  • 本文主要介绍了text-size-adjust属性的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:41
  • 本文主要介绍了浏览器全屏显示背景图片的css样式与html结构的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-18 17:16
  • 本文主要介绍了display属性详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:48
  • 本文主要介绍了CSS3中::-moz-focus-inner用法详解的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-28 09:59
  • 本文主要介绍了详解css3 flex弹性盒自动铺满写法的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-09-27 00:00