隐藏滚动条,但仍然能够滚动

我希望能够滚动整个页面,但不显示滚动条。

在谷歌浏览器中:

::-webkit-scrollbar { 
    display: none; 
}
但是Mozilla Firefox和Internet Explorer似乎无法正常工作。 我也在CSS中尝试过:
overflow: hidden;

那确实隐藏了滚动条,但我无法滚动了。 有什么办法可以删除滚动条,同时仍然可以滚动整个页面? 仅使用CSS或HTML。请帮助我。

转载于:https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

23个回答

Just a test which is working fine.

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

or

Using Position: absolute,

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Info:

Based on this answer, I created a simple scroll plugin. I hope this will help someone.

csdnceshi77
狐狸.fox To clarify my previous comment - my horizontal implementation using this technique doesn't scroll in Edge. Your fiddles do work.
2 年多之前 回复
csdnceshi77
狐狸.fox Works nicely in latest Chrome, FF and Safari, doesn't work in any Edge.
2 年多之前 回复
csdnceshi59
ℙℕℤℝ padding-left: 20px !important; /* Increase/decrease this value for cross-browser compatibility */
2 年多之前 回复
csdnceshi78
程序go This is fine and dandy but seems like a hacky approach where you should be able to target the scroll bar via css...
大约 3 年之前 回复
weixin_41568174
from.. I ended up using most of the 7507 Fiddle approach in the jQuery Table Body Scroll plugin here: github.com/cubiclesoft/jquery-tablebodyscroll Demo (under 'Add Entry'): barebonescms.com/demos/admin_pack/admin.php
3 年多之前 回复
weixin_41568174
from.. - I tried manipulating the Fiddles to utilize your box-sizing/calc() suggestion but I can't seem to get it to work. While the scrollbars don't appear, the content also gets chopped off no matter what I've tried (padding, margins, right). Can you post some updated Fiddles? I was testing with calc(100% + 200px) instead of 50px. It would be nice to ditch Javascript if it doesn't involve any hacks.
3 年多之前 回复
weixin_41568174
from.. Improved Fiddles: jsfiddle.net/5GCsJ/7505 and jsfiddle.net/5GCsJ/7507 These add rtl support and a third container for applying padding to the contained content using display: table-cell. The second Fiddle still shows the scrollbars on Android, which is probably the more correct solution given how scrollbars are usually overlaid on top of the content. ::-webkit-scrollbar { display: none; } probably works fine to solve that issue. Most people are simply interested in making very ugly scrollbars vanish.
3 年多之前 回复
csdnceshi67
bug^君 Why complicate and calculate scrollbar width? Just set box-sizing: border-box; width: calc(100% + 50px); and the same value for padding. No browser has 50px scrollbar width/height, so it should simply cover them all...
3 年多之前 回复
csdnceshi62
csdnceshi62 The problem with padding-right method is that child elements with width:100% will be 100%-17px wide, leaving some space on the right.
3 年多之前 回复
csdnceshi69
YaoRaoLov Safari scroll is always floating, so it doesn't work.
接近 4 年之前 回复
csdnceshi68
local-host one more thing, you should add box-sizing: content-box; in child's css style..
接近 4 年之前 回复
weixin_41568184
叼花硬汉 I combined this answer with this answer for calculating the width of the scrollbar in browsers, and then just added modified the right css via jQuery to be the calculated width of the scrollbar. Seems to work nicely :)
接近 4 年之前 回复
csdnceshi53
Lotus@ for that you can manage it with JavaScript. element.offsetWidth - element.clientWidth.
大约 4 年之前 回复
weixin_41568126
乱世@小熊 I have a problem with the different browsers and their versions. On Firefox I need to set the padding-right 17px, but on Chrome it is 15px :/
大约 4 年之前 回复
csdnceshi53
Lotus@ the same concept should work. use margin-bottom or bottom.
接近 5 年之前 回复
csdnceshi65
larry*wei What about the horizontal scroll bars? How can you hide those?
接近 5 年之前 回复
csdnceshi66
必承其重 | 欲带皇冠 Tried it using Firefox, didn't work, and I didn't bother to try other browsers. It only showed a pink thin border box.
5 年多之前 回复
csdnceshi64
游.程 how does it work, or specifically, why does it even scroll for first example. Overflow is hidden right! so anything that expands beyond parent should be hidden. Overflow is auto for child, so if content of child is more than child height scrollbar would appear. But content isn't more than the height of the child so scroll bars don't appear. That's fine however why does it scroll????
接近 6 年之前 回复
weixin_41568208
北城已荒凉 This approach won't cover all browsers, and will be very specific to the browser's version you are working with during the development.
接近 6 年之前 回复
csdnceshi73
喵-见缝插针 This solution does not work when the content's width is set to auto. when scrolling all the way to the right, part of the content is still not visible. Why is that? Any solutions? Checkout the problem here : jsfiddle.net/50fam5g9/7 Note : the width of the content cannot be known beforehand in my case that's why it has to be set to auto.
大约 6 年之前 回复
csdnceshi52
妄徒之命 In your last "working fiddle" I've seen too many !important so I've remove them all : jsfiddle.net/5GCsJ/954
6 年多之前 回复

This works for me:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Note: In the latest versions of Firefox the -moz-scrollbars-none property is deprecated ( link ).

csdnceshi71
Memor.の For obsolete Firefox -moz-scrollbars-none you can use @-moz-document url-prefix() { .container { overflow: hidden; } }. See stackoverflow.com/questions/952861/….
3 年多之前 回复
csdnceshi75
衫裤跑路 I didn't know that. I will test that, will check for a solution and will update my post. thanks :)
3 年多之前 回复
csdnceshi65
larry*wei Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch
3 年多之前 回复
csdnceshi75
衫裤跑路 Unfortunately the -moz-scrollbars-none property is deleted for the newest Firefox versions: developer.mozilla.org/en-US/docs/Web/CSS/overflow
接近 4 年之前 回复
weixin_41568174
from.. For me, overflow: -moz-scrollbars-none hides the scrollbars in Firebox but also disables scrolling. Can you provide a demo where this is working for you?
大约 4 年之前 回复
csdnceshi68
local-host firefox hide doesn't work for me
大约 4 年之前 回复

Easy in Webkit, with optional styling:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
csdnceshi68
local-host ALSO, If you would like to alternatively hide x-scrollbar, you can add: height: 0px; to ::-webkit-scrollbar
大约 2 年之前 回复
csdnceshi76
斗士狗 Useless considering all users don't use webkit.
2 年多之前 回复
csdnceshi50
三生石@ it works with chrome. but does not work with mozilla firefox.
2 年多之前 回复
weixin_41568174
from.. In electron, was having issue with the scrollbar always showing, then 2 scrollbars when scroll was needed, the above just removes all scroll bars.. fixed by applying to only html e.g: html::-webkit-scrollbar
2 年多之前 回复
csdnceshi67
bug^君 Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch
3 年多之前 回复
csdnceshi77
狐狸.fox works excellent in Electron apps as expected since they're chromium. +1 thanks :D
3 年多之前 回复
csdnceshi51
旧行李 Does not works on Firefox, Quite obvious as this purely states webkit. Thanks :)
接近 4 年之前 回复
weixin_41568110
七度&光 Tried in Google chrome and safari. Works! +1
大约 4 年之前 回复
csdnceshi72
谁还没个明天 This worked well for all my bowsers. Thanks
大约 4 年之前 回复
weixin_41568131
10.24 tried this in cordova app, worked fine. had to apply overflow:scroll to element.
接近 5 年之前 回复
#subparant{
    overflow:hidden;    
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity:10%;
}

#child{
    width:511px;
    background-color:rgba(123,8,10,0.42);
}

<body>
    <div id="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>
csdnceshi68
local-host it's the same thing as the most upvoted sollution: trying to hide the scrollbar. this is not ideal because it varies with the browser
2 年多之前 回复
weixin_41568196
撒拉嘿哟木头 Not sure why this was downvoted, but I just upvoted it as it does go in the right direction, the other solutions didn't really work well in my case. overflow-x: hidden; + overflow-y: scroll; is what did the trick, along with the >100% width (110% in my case worked nicely).
5 年多之前 回复
<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

this is a trick to somewhat overlap scrollbar with an overlapping div which doesnt have any scroll bars

::-webkit-scrollbar { 
    display: none; 
}

this is only for webkit browsers.. or you could use browser specific css (if there is any in future) every browser could have a different and specific property for their respective bars

--EDIT--

For Microsoft Edge use: -ms-overflow-style: -ms-autohiding-scrollbar; or -ms-overflow-style: none; as per MSDN.

There is no equivalent for FF Although there is JQuery plugin to achieve this http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

csdnceshi73
喵-见缝插针 This makes it much easier than I thought. But how do you make IE understand that these are 2 different things: overflow-y:scroll; overflow-x:visible; D:
大约 2 年之前 回复
weixin_41568208
北城已荒凉 The following allowed me to enable native scrolling in Cordova with jQuery Mobile 1.4 on iOS7 & iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit() $.mobile.touchOverflowEnabled = true;
接近 6 年之前 回复
weixin_41568126
乱世@小熊 Your first solution gives me this problem s24.postimg.org/idul8zx9w/Naamloos.jpg And what do you mean by hacky layout @ArpitSingh
7 年多之前 回复
csdnceshi66
必承其重 | 欲带皇冠 either a hacky layout or jquery is an alternative
7 年多之前 回复
weixin_41568126
乱世@小熊 And what are thow specific css properties?
7 年多之前 回复
csdnceshi66
必承其重 | 欲带皇冠 ictacademie.info/oussamaelbachiri this site @Oussama Dobby uses media='screen' and then '::-webkit-scrollbar' property for css
7 年多之前 回复

this will be at the body:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

and that is the css:

#maincontainer 
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}

#child 
{
background: white;
height:500px;
}

My problem : I don't want any style in my html, I want directly my body scrollable without any scrollbar, and only a vertical scroll, working with css-grids for any screen size.

The box-sizing value impact padding or margin solutions, they works with box-sizing:content-box.

I still need the "-moz-scrollbars-none" directive, and like gdoron and Mr_Green, I had to hide the scrollbar. I tried -moz-transform and -moz-padding-start, to impact only firefox, but there was responsive side effects that needed to much work.

This solution works for html body content with "display: grid" style and it is responsive.

/* hide html and body scroll bar in css-grid context */
html,body{
  position: static; /* or relative or fixed ... */
  box-sizing: content-box; /* important for hidding scrollbar */
  display: grid; /* for css-grid */
  /* full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}
html{
  -ms-overflow-style: none;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  background: transparent;
  visibility: hidden;
  width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make html with overflow hidden */
  html{
    overflow: hidden;
  }
  /* Make body max height auto */
  /* set right scroll bar out the screen  */
  body{
    /* enable scrolling content  */
    max-height: auto;
    /* 100vw +15px : trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);
    /* set back the content inside the screen */
    padding-right: 15px;
  }
}
body{
  /* allow vertical scroll */
  overflow-y: scroll;
}
weixin_41568126
乱世@小熊 Like this reliable answer. Others require "magic numbers."
大约 2 年之前 回复

perfect-scrollbar plugin seems to be the way to go, see: https://github.com/noraesae/perfect-scrollbar

It is well documented and complete JS based solution for the scrollbars issue.

Demo page: http://noraesae.github.io/perfect-scrollbar/

weixin_41568184
叼花硬汉 Been staring at perfect-scrollbar for 2 minutes without an immediate revelation of how to use it to hide the scrollbar. If you'd expand your answer on that topic, I'm sure you'll get more upvotes.
2 年多之前 回复
csdnceshi61
derek5. I can't see how this relates to the question?
3 年多之前 回复

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed and it works in all browsers. It doesn't require explicitly setting the width of the container either thus making it fluid.

This method uses negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

Example code for the vertical version:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent{
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}
csdnceshi77
狐狸.fox Yes, I updated my answer and added a demo for the two way scrolling.
大约 2 年之前 回复
csdnceshi59
ℙℕℤℝ Is there a way to combine both?
大约 2 年之前 回复
csdnceshi77
狐狸.fox Yes that can be done but It's very hard to choose the correct size. As we know scrollbars have different sizes across platforms, but the biggest issue is that mobile devices usually have no scrollbar at all. I spent hours trying to hack together a CSS solution using a pseudo element that has width:0 and overflow-y:scroll effectively creating an element that has the width of the platforms scrollbar. Unfortunately nothing worked and I think it's not possible with pure CSS. However it's doable if you are able to use a fixed width scroll container.
大约 2 年之前 回复
weixin_41568208
北城已荒凉 Great. If you make margin-right a larger negative number than padding-right, you can get rid of some of the extra white space also. Use a difference that's the width of the smallest scrollbar around.
大约 2 年之前 回复
csdnceshi65
larry*wei -- thanks a ton for the demo -- works perfectly. Don't know why we all make it so hard but this is so simple I feel silly for not doing this before.
2 年多之前 回复
csdnceshi77
狐狸.fox I added a horizontal demo. For fixed width content elements like images it should just work but for text you need to disable wrapping.
2 年多之前 回复
csdnceshi65
larry*wei This is absolutely the best answer, hands down. Now, how does one modify it for hiding horizontal scrollbars?
2 年多之前 回复
csdnceshi77
狐狸.fox It should work no matter what width the parent is. If your content is wider than the viewport a horizontal scrollbar will appear. You can avoid this with normal responsive design techniques.
2 年多之前 回复
csdnceshi69
YaoRaoLov Sounds good, but it may have a side effect on responsive page/form, how it will be going behave in case of small screen or content width is more than viewport?
2 年多之前 回复
csdnceshi75
衫裤跑路 I know this is a new answer to an old question, but this should be the accepted answer now. Good stuff man.
2 年多之前 回复

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Apply CSS accordingly.

Check it here (tested in IE and FF).

共23条数据 1 3 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐