简体   繁体   English

CSS / JQUERY使div可滚动而不显示滚动条

[英]CSS/JQUERY make div scrollable without showing scrollbar

is there any way to make a div scrollable with overflow-y:hidden; 是否有任何方法可以使用overflow-y来隐藏; and overflow-x:hidden? 和overflow-x:隐藏?

i'm trying without success, maybe i need some js or jquery script? 我尝试没有成功,也许我需要一些js或jquery脚本?

i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now). 我的意思是,我想在y轴上进行div滚动而不显示右侧的滚动条(就像现在一样)。

itryed: itryed:

.get-list{
  position:absolute;
  z-index:444;
  text-align: center;
  display: none;
  bottom:0;
  clear:both !important;
  left:0;
  right:0;
  top:11%;

  margin:0 auto;
  background:#fff;
  max-height:800px;
  overflow-y:no-display;
  overflow-x:hidden;
  display: block;
 }

thanks 谢谢

EDIT 编辑

.log-widget-list{
  position:absolute;
  z-index:444;
  text-align: center;
  display: none;
  width:99%;
  margin:0 auto;
  background:#fff;
  height:800px;
  overflow: hidden;
 }

.log-widget-list .scroller{
  overflow: scroll; 
  height:800px;
  width:100%;
}

it shows right scrollbar anyway 无论如何它显示右滚动条

Let's create a div with a width of 200px: (note the overflow:hidden ) 让我们创建一个宽度为200px的div :(注意overflow:hidden

#sidebar{
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}

Inside that div we will create the 'scrollable' div. 在div中,我们将创建'可滚动'div。 See: 看到:

#sidebar #scroller{
    width: 215px;
    height: 300px;
    padding-bottom: 15px;
    overflow: scroll; 
}​

Altough we give it overflow:scroll , the scrollbar isn't visible. 我们给它overflow:scroll ,滚动条不可见。 This is because this div has a total width of 215px which will make the scrollbar disappear outside the div. 这是因为这个div的总宽度为215px,这将使滚动条消失在div之外。

Also see: http://jsfiddle.net/TBsN8/ 另见: http//jsfiddle.net/TBsN8/

fixed as shown thanks to Sebass van Boxel 如图所示,感谢Sebass van Boxel

.log-widget-list{
  position:absolute;
  display: none;
  width:98% !important;
  top:11%;
  max-height:500px;
  overflow: hidden;
  bottom:0 !important;
  left:0;
  right:0;
  margin:0 auto !important;
 }

.log-widget-list .scroller{
  overflow: scroll; 
  max-height:500px;
  padding-bottom:3%;
  width:104% !important;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM