有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

overflow:scroll不显示滚动条(轻松实现滚动效果)详细步骤

代码编程 炮渣日记 4周前 (11-12) 64次浏览 已收录 0个评论 扫描二维码

页面中有很多时候需要多区域定相应的宽高,然而当内容过多时会出现超出元素区域或出现滚动条的情况,如何解决这种状况呢?一起去看看吧!

一、滚动条样式相关的CSS属性

overflow属性规定当内容溢出元素框时需要对其进行的操作,即指当对象的内容超过其指定高度及宽度时如何显示内容。

1、overflow属性的值

visible:默认值内容不会被修剪,呈现在元素框之外。

hidden: 内容会被修剪,超出元素的内容隐藏,即不可见。

scroll: 内容会被修剪,超出的内容会出现滚动条,用滚动的方式查看其余的内容。

auto: 浏览器会根据内容相对于元素的宽高自动添加滚动条,用滚动的方式查看其余的内容。

inherit:规定从父元素继承其overflow属性的值。

2、定义与滚动相关的属性及其值

overflow:auto; 会根据内容相对于元素的宽高自动添加滚动条。

overflow:scroll; 显示横、纵向滚动条。

overflow-x:hidden; 不显示横向的滚动条。

overflow-y:hidden; 不显示纵向的滚动条。

overflow-x:scroll; 显示横向的滚动条。

overflow-y:scroll; 显示纵向滚动条。

3、滚动条的样式与滚动属性的运用

overflow:scroll不显示滚动条(轻松实现滚动效果)详细步骤

滚动条的样式与滚动属性的运用示例

二、在页也中去掉指定方向滚动条

1、去掉横向滚动条

<body style=”overflow:scroll;overflow-x:hidden”>或selector{overflow:scroll;overflow-x:hidden}。

2、去掉竖向滚动条

<body style=”overflow:scroll;overflow-y:hidden”>或selector{overflow:scroll;overflow-y:hidden}。

3、去掉滚动条:

<body scroll=”no”>或selector{overflow:hidden;}

三、CSS实现隐藏滚动条同时又可以滚动

即可以隐藏滚动条,同时又保证页面可以滚动?

使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。

由于只需要兼容移动浏览器(Chrome 和 Safari),可以使用自定义滚动条的伪对象选择器

::-webkit-scrollbar。

示例

即对出现滚动条的滚动元素使用CSS样式
selector::-webkit-scrollbar{display:none}或selector::-webkit-scrollbar {height:0;width:0;}即可以隐藏滚动条。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址