页面滚动条，网页页面不显示滚动条

编程之家2026-06-241004次浏览

其实页面滚动条的问题并不复杂，但是又很多的朋友都不太了解网页页面不显示滚动条，因此呢，今天小编就来为大家分享页面滚动条的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

做网页时,如何调滚动条的颜色

滚动条颜色生成器

<style>

body{

overflow:scroll;

overflow-x:hidden;

background-color:#fff;

scrollbar-face-color:#fff;

scrollbar-shadow-color:#fff;

scrollbar-highlight-color:#ccc;

scrollbar-3dlight-color:#fff;

scrollbar-arrow-color:#f00;

scrollbar-track-color:#fff;

}

</style>

各条语句含义如下：

Crollbar-Face-color:滚动条页面颜色设定；

Scrollbar-Highlight-Color:滚动条斜面和左面颜色设定；

Scrollbar-Shadow-Color:滚动条下斜面和右面颜色设定；

Scrollbar-3Dlight-Color:滚动条上边和左边的边沿颜色设定；

Scrollbar-Arrow-Color:滚动条两端箭头颜色设定；

Scrollbar-Track-Color:滚动条底版颜色设定；

Scrollbar-Darkshadow-Color:滚动条下边和右边的边沿颜色设定。

overflow-x:hidden;隐藏水平滚动条

1、隐藏滚动条

在任何情况下，如果网页超出显示范围，就会出现滚动条。但有时我们并不想让它显示，如何隐藏它呢？只需在<body></body>之间插入代码：<bodystyle="overflow-x:hidden;overflow-y:hidden">即可。其中x表示水平滚动条，将其改为y的话就可以隐藏垂直滚动条。

2、滚动条各条语句含义如下：

Crollbar-Face-color:滚动条页面颜色设定；

Scrollbar-Highlight-Color:滚动条斜面和左面颜色设定；

Scrollbar-Shadow-Color:滚动条下斜面和右面颜色设定；

Scrollbar-3Dlight-Color:滚动条上边和左边的边沿颜色设定；

Scrollbar-Arrow-Color:滚动条两端箭头颜色设定；

Scrollbar-Track-Color:滚动条底版颜色设定；

Scrollbar-Darkshadow-Color:滚动条下边和右边的边沿颜色设定

3、滚动条透明代码：

#ffffff为颜色代码，可根据网页的基色来改变。

<style>

body{

scrollbar-base-color:#ffffff;

scrollbar-darkshadow-color:#ffffff;

scrollbar-highight-color:#ffffff;

background:url(背景图片地址);

overflow:hidden;

margin:0;

}

div.main{

overflow:scroll;

width:100%;

height:100%;

filter:chroma(color=#ffffff);

}

</style>

框架示范（改变代码里的数字则是改变框架在网页里面的位置）：

<DIVclass=mainid=Layer1style="Z-INDEX:1;RIGHT:600px;OVERFLOW-X:hidden;OVERFLOW:scroll;WIDTH:400px;POSITION:absolute;TOP:47px;HEIGHT:400px">框架内容</DIV>

怎么给div加滚动条

1、<divstyle="height:300px;width:100px;overflow:auto"><div/>（height和width根据需求设定）

注意:如果只写height就只有垂直滚动条，只写width就只有水平滚动条,都不写没有效果。还有这里overflow设置为auto,也就说是如果你的页面高度大于300px就会出现滚动条，小于300px就没有滚动条。同理，如果宽度大于100px出现滚动条，小于就没有。

2、你也可以将overflow设置为scroll，即:<divstyle="height:300px;width:100px;overflow:scroll"><div/>。这样设定的效果为

不管你的页面高度大于还是小于300px,都会出现滚动条，宽度同理。

3、也可以这样设置

水平滚动条：<divstyle="width:100px;overflow-x:auto"></div>

垂直滚动条：<divstyle="height:300px;overflow-y:auto"></div>

水平加垂直：<divstyle="width:100px;height:300px;overflow-x:auto;overflow-y:auto"></div>

扩展资料

<div>可定义文档中的分区或节（division/section）。

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用id或class来标记<div>，那么该标签的作用会变得更加有效。

注释：<div>是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。

提示：请使用<div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。

参考资料：百度百科div

JS有哪些属性可以判断页面是否存在滚动条

这次给大家带来JS有哪些属性可以判断页面是否存在滚动条，JS判断页面是否存在滚动条的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

最近在写插件的过程中，需要使用 JS判断是否有滚动条，搜了一下，大致方法都差不多，但都有些_嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度，通过本篇文章一并与大家分享。

为什么要判断滚动条

判断滚动条的需求在弹窗插件中用的较多，因为弹窗大多会添加 overflow: hidden的属性，如果页面比较长的话，添加这个属性之后页面会有晃动。

为了增强用户体验，通过判断是否有滚动条而添加 margin-left属性以抵消 overflow: hidden之后的滚动条位置。

判断是否有滚动条的方法

其实只需要一行 JS就可以，测试兼容 IE7

function hasScrollbar(){

return document.body.scrollHeight>(window.innerHeight|| document.documentElement.clientHeight);

}一般情况下，使用 document.body.scrollHeight> window.innerHeight就可以判断。

但是在 IE7，IE8中 window.innerHeight为 underfined，所以为了兼容 IE7、IE8，需要使用document.documentElement.clientHeight属性计算窗口高度。

计算滚动条宽度的方法

还是以弹窗为例，因为 IE 10以上以及移动端浏览器的滚动条都是不占据页面宽度的透明样式（其中 IE 10以上浏览器可以通过 CSS属性还原原始的滚动条样式），所以为了进一步增强用户体验，我们还需要计算滚动条的宽度，根据情况添加合理的 margin-left数值。

计算滚动条宽度的方法比较简单，新建一个带有滚动条的 p元素，通过该元素的 offsetWidth和 clientWidth的差值即可获得，我在此借鉴 Magnific-popup中的方法

function getScrollbarWidth(){

var scrollp= document.createElement("p");

scrollp.style.cssText='width: 99px; height: 99px; overflow: scroll; position: absolute; top:-9999px;';

document.body.appendChild(scrollp);

var scrollbarWidth= scrollp.offsetWidth- scrollp.clientWidth;

document.body.removeChild(scrollp);

return scrollbarWidth;

}总结

使用 JS实现一个功能可能并不困难，但作为编程人员应该时刻思考如何更简单更优雅的实现这个功能，并且时刻以提升用户体验为原则。对于条件判断，也许十行的逻辑判断可能只需要一行，最近感受极为深刻，而且要善于使用三元表达式替代 if..else来精简代码。

原理就是判断是文档高度大于可视区域高度。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！