div隐藏滚动条,div隐藏滚动条,且内容可以滚动,怎么实现

http://www.itjxue.com  2023-01-05 01:02  来源:未知  点击次数: 

如何让div 滚动但不显示滚动条

去掉横向滚动条:body style='overflow:scroll;overflow-x:hidden'

去掉竖向滚动条:body style='overflow:scroll;overflow-y:hidden'

两个都去掉:body scroll="no"

DIV实现滚动效果,如何隐藏滚动条?

无法用css直接隐藏,只能通过遮盖住滚动条达到效果。

无法用css直接隐藏,只能通过遮盖住滚动条达到效果,可以在滚动条上方加一个与地下层颜色或者图案一样的层盖住滚动条的范围,或者你用js模拟滚动条把滚动条的各个部分做为透明度100%的图片或者空白div都可以,反正滚动条是一定会存在的,只是看不到而已

还有就是overflow:hidden这个值是溢出隐藏部分,最好是别用这个当做滚动条,这个一般也就是用于模拟滚动条才用到。

怎么让DIV固定在页面的某个位置而不随着滚动条随意滚动?

可用的方法比较多,比较常见的是使用CSS。

1、使用CSS

CSS让DIV固定位置不随滚动条而滚动,fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的。

(1)我们需要做的是,让body保持其原有高度,让html只有一个窗口那么高。代码我们可以这样写:

html{overflow:hidden;}?

body{height:100%;overflow:auto;}

(2)我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上。

html{overflow:hidden;}

body{height:100%;overflow:auto;}

#rightformform{position:absolute;right:30px;top50px;}

(3)页面由左侧菜单和右侧主体内容构成,右侧内容可能会很多,会出现翻屏。现在是要无论页面怎么翻屏滚动,左侧的菜单始终在左侧。请看CSS解决方案。

#site_nav{position:fixed;width:160px;padding:6px10px;height:100%;??

background:#ffc;overflow-y:auto;}?

#content{padding:10px10px10px190px;}

(4)我设置左侧div#site_nav的样式,将其位置固定,即position:fixed,并且设置固定宽度,高度为100%,为了区分右侧内容,我设置了背景颜色background:#ffc。

接着,我将内容部分div#content设置其padding值,注意关键是padding-left:190px,只有大于左侧菜单宽度的padding值,才能使右侧主体内容部分不会与左侧菜单重叠。

2、不使用JS:

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

head

metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/

title无标题文档/title

styletype="text/css"

ul{

margin:0;

padding:0;}

li{

list-style-type:none;float:left;margin-left:10px;line-height:30px;}

/style

/head

body

divstyle="width:100%;height:30px;background-color:#093;position:fixed;left:0px;top:0px;"

ul

lisd/li

lidsda/li

lidsa/li

/ul

/div

divstyle="height:10000px;border:1pxsolidred;"/div

divstyle="width:100%;height:30px;background-color:#093;position:fixed;left:0px;bottom:0;"/div

/body

/html

3、html

head

title/title

style?type="text/css"

html,body?{

overflow:hidden;

margin:0px;

width:100%;

height:100%;

}

.virtual_body?{

width:100%;

height:100%;

overflow-y:scroll;

overflow-x:auto;

}

.fixed_div?{

position:absolute;

z-index:2008;

bottom:20px;

left:40px;

width:800px;

height:40px;

border:1px?solid?red;

background:#e5e5e5;

}

/style

/head

body

div?class="fixed_div"I?am?still?here!/div

div?class="virtual_body"

div?style="height:888px;"

I?am?content?!

/div

/div

分析:

1、html,body:将默认可能会随机出现的滚动条,完全地隐藏了,这样不管您放了啥内容,它们都不会出来了。

2、.virtual_body:顾名思义,就是一个假的body了,它被设置为长宽都为100%的,意思就是它利用了所有可视的浏览器窗体显示所有的内容,并垂直允许出现滚动条。

3、.fixed_div:这下它可以利用绝对值进行定位了,因为在这个场景下,这个页面100%地被那个假冒的body给独霸了,而滚动条反正也出不来,您就可以自认为是在某个点蹲坑了,绝对安全。

css隐藏div滚动条

记录一下日常开发...

之前开发隐藏 div 滚动条,都是通过设置外出 div 为 overflow: hidden , 然后设置内层 div 的宽度略大于外层 div ,这种做法限制很多,需要确定内外层 div 的宽度,没办法自适应多种分辨率的屏幕,而且开发调试起来很麻烦。

总结一下,隐藏 div 滚动条的几种方式

怎么在小块div里滚动条时不要让浏览器滚动

小块div里滚动条时不要让浏览器滚动的方法是设置滚动条隐藏。

1、垂直滚动条:

设置是否显示滚动条主要是在CSS中设置下列的属性:

代码如下:

overflow:visible|auto|hidden|scroll

overflow-x:横向滚动条

overflow-y:纵向滚动条

参数的意义:

visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。

auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条

hidden: 不显示超过对象尺寸的内容

scroll: 总是显示滚动条

overflow:auto;这个表示当你内容超过div高度出现垂直的滚动条

所以要想在需要的时候显示垂直的滚动条,可以这么实现:

divstyle="overflow:auto;".../div

2、水平滚动条:

如果只想出现水平的滚动条,一般还要配合禁止换行的设置,例如:

divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"/div

html的一个DIV样式,如何使内容滚动条隐藏,但依旧可以滚动?

溢出隐藏,写两个div,高度都固定,外面的固定宽度overflow:

hidden;里面的div宽度比外面的稍宽,最好算好滚动条的宽度,overflow-y:

auto即可

------------------------------------------------

我是内容

-----------------------------------------------

(责任编辑:IT教学网)

更多

推荐网络媒体文章