CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
互联网 & 10-12 17:36:51 & 作者：佚名 &
CSS中"overflow:scroll"默认是左右，上下都滚动。怎么设置只上下滚动而不左右滚动，下面有个不错的解决方法，感兴趣的朋友可以参考下
CSS中&overflow:scroll&默认是左右，上下都滚动
如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？
如果左右没有超出内容时，用overflow:
如果左右有超出内容，用overflow-x:
不过IE本身也是有问题的：在设置Frame时，有一属性是scrolling=&yes/no/auto&，IE6的Mozilla都支持，但很显然地，IE的开发人员在这个地方懒了一下，他们对auto的理解很不人性化。auto的意思是自动，就是要的时候有，不要的时候没有。但如果设成auto，则在网页过长需要出竖起滚动条时，IE会自动地把水平滚动条也显示出来，哪怕网页完全不超宽。而设成yes时，IE则会一直出竖直滚动条，而不随便出水平条，这差不多是对的。所以如果要用Frame的话，还是要把这个属性设成Yes，这完全是为迁就IE。 Mozilla则在任何时候都是对的。
首先通过firebug找到对应的div
最后代码如下：&&&& &div class=&sidebar-nav& style=&overflow:overflow-x: hidden&&
大家感兴趣的内容
12345678910
最近更新的内容&&744 阅读
还在为浏览器中那丑陋的滚动条烦恼么？还在为着想要内容显示,但是滚动条却不希望它显示而烦恼么？如果你还在烦恼这些,那么很荣幸的告诉你,哥哥带你装逼带你飞(哈哈，开玩笑而已，哥你别当真)！
传统的浏览器的滚动条样式比较难看(当然,你要是能够接受那请忽略这篇文章),项目中产品经理嫌弃滚动条的样式太难看了(好吧,其实我自己是能接受的,确实我是缺少美感的前端,这是硬伤啊),好吧,既然如此,那我们就只能动手捣鼓它了呗。
我们先来看一下传统的浏览器滚动条的样式：
好吧,确实是挺丑的,请原谅我的审美！
那么现在,我们就要来更改一下这么丑的滚动条了,网上查了很多的资料,发现-webkit-内核的浏览器的支持性是最好的,而IE,好吧,它的滚动条自定制功能并不是很强大,只能控制各个部分的颜色而已,而火狐方面的话,网上查了很多自定义滚动条的方法,发现却是不支持的,真心蛋疼。
首先先来看一下在IE下的滚动条的自定义：
滚动条样式支持情况支持浏览器版本可否继承描述 scrollbar-3dlight-color IE特有属性 IE5.5+ Y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-highlight-color IE特有属性 IE5.5+ Y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar-face-color IE特有属性 IE5.5+ Y 设置滚动框和滚动条箭头的颜色 scrollbar-arrow-color IE特有属性 IE5.5+ Y 设置滚动条箭头的颜色 scrollbar-shadow-color IE特有属性 IE5.5+ Y 设置滚动框的和滚动条箭头右下边缘的颜色 scrollbar-darkshadow-color IE特有属性 IE5.5+ Y 设置滚动条槽的颜色 scrollbar-base-color IE特有属性 IE5.5+ Y 设置滚动条主要构成部分的颜色 scrollbar-track-color IE特有属性 IE5.5+ Y 设置滚动条轨迹组成部分的颜色
文字叙述的再多,不如上一张图来的简单明了：
很容易看到各个属性控制的部分,其中有几个是控制着相同的部分,但是测试过程中发现有几个属性却并不能有效果,例如：scrollbar-darkshadow-color，scrollbar-base-color(网上查到资料说当 scrollbar-track-color 和 scrollbar-face-color 未设置时才开始起效果,但是在IE上却并没有出现效果,本人使用IE11测试,如果你测试成功,方便的话跟我说下,涨知识)，而 scrollbar-shadow-color (按照盒子模型来解释,就是border区域)，而 scrollbar-arrow-color 则是控制滚动条上下的两个箭头的样式,有一点需要注意的是:在 scrollbar-highlight-color 与 scrollbar-track-color 同时设置不同的样式的时候,IE会使用scrollbar-track-color的样式！！！
上述一句话总结就是：IE浏览器滚动条的自定制的功能并不算强大,只能改变样式,然而要做出有个性的滚动条,呵呵！！！！
测试过程中发现,在所有浏览器中,webkit内核的浏览器的滚动条可定制性是最强的,下面,让我们一起来看看webkit：
::-webkit-scrollbar (1)
::-webkit-scrollbar-button (2)
::-webkit-scrollbar-track (3)
::-webkit-scrollbar-track-piece (4)
::-webkit-scrollbar-thumb (5)
再用一张图例来看下它们相对应的作用区域：
画的有点丑,请重点看作用区域,
::-webkit-scrollbar 控制整个滚动条, ::-webkit-scrollbar-button 控制滚动条中的上下两个箭头,当未设置::-webkit-scrollbar-button时,webkit内核的浏览器则会自动忽略掉他们,滚动条中可拖动的那部分可以置顶或到底，::-webkit-scrollbar-track 控制的是整个滚动区域,::-webkit-scrollbar-track-piece 控制除了滚动条可以拖动的那部分的区域,::-webkit-scrollbar-thumb 控制可拖动的那部分滚动条区域。并且测试了下,纵向的滚动条,width是有效果的,height是没有效果的,横向的滚动条则相反!
具体效果如下：
上述是几个主要的属性几乎可以让我们重写浏览器的滚动条了(仅限于webkit内核的),但是webkit还提供了其他更多的属性及伪类让我们来定制丰富的浏览器样式,这里就不多做阐述,有兴趣的同学可以上网百度一下即可！
具体效果可以参考本人站点（http://meichao.sinaapp.com/#/index）在IE和webkit下都会有明显的样式更改，滚动条的样式,美感上确实有所提升。网上也查了很多关于火狐自定义滚动条的方法,基本都是插件，其中本人使用的是一个tinyscrollbar插件,不过它是隐藏了滚动条,然后自己使用图片来模拟滚动条!!!!
火狐下使用tinyscrollbar插件的效果如下：
欲查看原文章，请前往以下地址：http://www.gbtags.com/gb/share/8956.htm技术交流QQ群：
jquery特效
javascript特效
html5_css3特效
>js点击图片放大缩小水平滚动条拖动图片滚动展示
js点击图片放大缩小水平滚动条拖动图片滚动展示
日运行环境：IE6 IE7 IE8及以上 Firefox
js点击图片放大缩小图片左右滚动，设置水平滚动条拖动图片滚动，点击左右按钮图片滚动展示。js代码,js图片滚动,js水平滚动条
上一篇：下一篇：
热门网页特效
版权声明:本站资源均来自互联网，如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
公众号: zhaotexiao拒绝访问 | www.wangchao.net.cn | 百度云加速
请打开cookies.
此网站 (www.wangchao.net.cn) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(41979dee73ee4cc6-ua98).
重新安装浏览器，或使用别的浏览器div固定在页面左边,拖动横向滚动条依然在屏幕中页面的左边_百度知道
div固定在页面左边,拖动横向滚动条依然在屏幕中页面的左边
如题,css实现div的悬浮处理,让他不随横向滚动条的拖动改变在屏幕中的位置
额 我的意思是这个div随这横向滚动条的向左右拖动也随着左右动,始终在屏幕的一个位置不消失.给个简单的小例子 多谢
我有更好的答案
因为IE6的兼容性问题，所以这不考虑用fixed，代码如下，用了js的滚动事件&html&&head&&meta&charset=&utf-8&&/&&!--&CSS部分，宽度各100，红色背景，加了定位属性。&--&&style&&&*{margin:0;padding:0;}&&#div1{width:100height:100background:#F00;position:top:100left:0;}&/style&&/head&&&&body&style=&width:5000height:500background:#F7F7F7;&&&&&&&div&id=&div1&&我是固定的&/div&&&&/body&&&&!--&js控制&开始&--&&&&script&&&&&//添加滚动事件&&&&window.onscroll=function(){&&&&&&//获取横向滚动距离的值&&&&&&var&nWidth=document.documentElement.scrollLeft||document.body.scrollL&&&&&&//获取div标签对象&&&&&&var&oDiv=document.getElementById('div1');&&&&&&//将div的left值更改为横向滚动值，从而达到固定位置的目的&&&&&&oDiv.style.left=nWidth+'px';&&&&}&&&/script&&&&!--&js控制&结束&--&&/html&原理已在注释中说明，例子不算很完美（滚动过快会闪烁，需要额外增加缓冲效果解决），仅供参考。
讲div的position设置为fixed然后再根据left，top来定位到想要显示的地方，不过fixed在IE6中不怎么支持。但是IE6已经淘汰了，应该问题不大。
给个小例子呗
&div&class=&test&&我不动&/div&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&style&&&&&&&&&.test{&&&&&&&&&&&&&&&&position:&&&&&&&&&&&&&&&&border:1px&solid&#&&&&&&&&&&&&&&&&width:40&&&&&&&&&&&&&&&&height:40&&&&&&&&&&&&&&&&left:10&&&&&&&&&&&&&&&&top:100&&&&&&&&}&/style&&!---把上面的代码放在页面的body中的任意地方--&
额 我的意思是这个div随这横向滚动条的向左右拖动也随着左右动,始终在屏幕的一个位置不消失
为您推荐：
其他类似问题
滚动条的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。