css如何隐藏div滚动条却又能实现滚动功能?

 时间:2026-02-14 01:56:41

1、原理如下: 可以用padding等,把滚动条挤出到外面去,达到隐藏的效果。

具体操作:

在当前div的外面在嵌套一个div,外面div设置隐藏滚动条,里面的div宽度小于外面n像素,右内边距设置成n像素,然后在设置显示竖直滚动条

css如何隐藏div滚动条却又能实现滚动功能?

2、先给大家看一个简单的有滚动条的html界面:

代码如下:

<html>

<head>

<meta charset="utf-8">

</head>

 <body>

 <div style="border:1px blue solid;width:500px;height:500px;">

<div  style="border:1px red  solid;width:485px;height:100%;overflow-y:scroll;">

<script>

for(var i=0;i<200;i++)

{

document.write("<p align='center'>hello")

}

</script>

</div>

</div>

  </body>

</html>

代码很简单,我用一个for循环在div中生成了200条段落,

然后div又设置了固定的高宽,这样所有的段落超过了这个高宽,自然就会让div出现滚动条了

css如何隐藏div滚动条却又能实现滚动功能?

3、运行结果如下图所示:

css如何隐藏div滚动条却又能实现滚动功能?

4、设置外面div设置隐藏滚动条,里面的div宽度小于外面n像素,右内边距设置成n像素,然后在设置显示竖直滚动条

代码如下:

<html>

<head>

<meta charset="utf-8">

</head>

 <body>

 <div style="border:1px blue solid;width:500px;height:500px;overflow:hidden;">

<div  style="border:1px red  solid;width:485px;height:100%;overflow-y:scroll;overflow-x:hidden;padding-right:50px;">

<script>

for(var i=0;i<200;i++)

{

document.write("<p align='center'>hello")

}

</script>

</div>

</div>

  </body>

</html>

css如何隐藏div滚动条却又能实现滚动功能?

5、运行效果

css如何隐藏div滚动条却又能实现滚动功能?

6、然后我再去掉里面的红色边框,然后这样看起来是不只有一个div,并且出现了滚动条了?哈哈

css如何隐藏div滚动条却又能实现滚动功能?

  • php如何获取html标签img的src内容
  • jquery中怎样获得h1标签中的内容?
  • jquery 如何选择带有自定义属性的标签?
  • 通过JavaScript在div元素中动态创建div元素
  • sublime text怎么进行缩进
  • 热门搜索
    科技新闻手抄报 手抄报花边漂亮边框 推广普通话手抄报文字 小学生法制手抄报 地震手抄报简单又漂亮 环保手抄报模板 五一手抄报图片 关于童话的手抄报 预防禽流感手抄报 我的中国梦手抄报画