最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - CSSJQUERY make div scrollable without showing scrollbar - Stack Overflow

programmeradmin3浏览0评论

is there any way to make a div scrollable with overflow-y:hidden; and overflow-x:hidden?

i'm trying without success, maybe i need some js or jquery script?

i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now).

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

is there any way to make a div scrollable with overflow-y:hidden; and overflow-x:hidden?

i'm trying without success, maybe i need some js or jquery script?

i mean, i would like to make div scroll on y axes without showing scrollbar on right side( as it is now).

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

Share Improve this question edited Oct 3, 2012 at 21:45 Filippo oretti asked Oct 3, 2012 at 21:14 Filippo orettiFilippo oretti 49.8k96 gold badges229 silver badges351 bronze badges 9
  • 1 @SimpleCoder: I think OP has tried overflow-y: hidden and overflow-x: hidden, but that did not work. – Blender Commented Oct 3, 2012 at 21:15
  • 2 If there is no scrollbar, how is it supposed to scroll? Automatically? – Cat Commented Oct 3, 2012 at 21:17
  • 1 Yes you can by using jQuery.scrollLeft and jQuery.scrollTop. – Anoop Commented Oct 3, 2012 at 21:17
  • 1 some trick to hide scroll bar i mean – Filippo oretti Commented Oct 3, 2012 at 21:17
  • 1 @Ispuk You can use scrollTo(xpos,ypos); – Anoop Commented Oct 3, 2012 at 21:20
 |  Show 4 more ments

2 Answers 2

Reset to default 13

Let's create a div with a width of 200px: (note the overflow:hidden)

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

Inside that div we will create the 'scrollable' div. See:

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

Altough we give it overflow:scroll, the scrollbar isn't visible. This is because this div has a total width of 215px which will make the scrollbar disappear outside the div.

Also see: http://jsfiddle/TBsN8/

fixed as shown thanks to 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;
}
发布评论

评论列表(0)

  1. 暂无评论