css中怎样设置滚动滑块大于滚动条?

html-css041

css中怎样设置滚动滑块大于滚动条?,第1张

首先overflow:scoll的意思是当页面内容超出一屏(或者你给body设置的宽度)时显示滚动条的意思。

当没有超出时,当然只有X和Y的轴。

问题出在,背景图片不能设置大小。HTML不会计算出背景图片的大小,这和直接插入的图片是有区别的。

解决办法

1.把body的宽度和高度,和图片真实大小设置为一致。

2.就像你说的body里包的一个div,你给那个div设置的宽度和高度和图片一致即可。

另外题外补充,overflow还有两个其它参数。只显示Y轴或者X轴。不会overflow的使用在IE和FF中是有明显差异的。

如果仍没解决,百度Hi或者站内消息可以找到我

布局

<div id="con">

<ul id="tags">

<li class="selectTag"><a >标签一</a></li>

<li><a>标签二</a></li>

<li><a>自适应宽度的标签</a></li>

<li><a>自适应宽度的标签自适应宽度的</a></li>

<li><a>自适应宽度的标签</a></li>

</ul>

<div id="tagContent">

<div class="tagContent selectTag">第一个标签的内容</div>

<div class="tagContent">第二个标签的内容</div>

<div class="tagContent">第三个标签的内容</div>

<div class="tagContent">第4个标签的内容</div>

<div class="tagContent">第5个标签的内容</div>

</div>

</div>

JQ.

<script type="text/javascript">

$(function () {

$("#tags >li").bind("click", function () {

$(this).addClass("selectTag")

var index = $(this).index()

$("#tags >li").each(function (i) {if (i != index) { $(this).removeClass("selectTag")}})

$("#tagContent >div").each(function (i) {

if (i == index) { $(this).show().addClass("selectTag")}

else {$(this).hide().removeClass("selectTag")}

})

})

})

</script>

自己添加个JQ库就行了。样式自己调整。估计你样式问题

/*IE滚动条颜色设置*/

body {

scrollbar-arrow-color:#f2f2f3 /*上下箭头*/

scrollbar-track-color:#1589ce /*底层背景色*/

scrollbar-face-color:#27aeff /*滚动条前景色*/

scrollbar-Shadow-color:#1589ce /*滚动条边线色*/

}

/*chrome滚动条颜色设置*/

body::-webkit-scrollbar {width:10px height:10px background-color:transparent} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

body::-webkit-scrollbar-track {background-color:#ccc border-radius:10px -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3)} /*定义滚动条轨道 内阴影+圆角*/

body::-webkit-scrollbar-thumb {background-color:#555 border-radius:10px -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)} /*定义滑块 内阴影+圆角*/