javascript - overflow-y:scroll is not working for chrome - Stack Overflow

admin管理员组

文章数量:1202373

I am not getting a scroll-bar for box in chrome but getting in fire fox and internet explorer

li.box{
    border-radius: 0px;
    padding:0;
    border: solid 1px #8c8d8e;
    overflow: hidden;
    overflow-y:scroll;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    opacity: 0.85;
}

this is JSFiddle link /

I am not getting a scroll-bar for box in chrome but getting in fire fox and internet explorer

li.box{
    border-radius: 0px;
    padding:0;
    border: solid 1px #8c8d8e;
    overflow: hidden;
    overflow-y:scroll;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    opacity: 0.85;
}

this is JSFiddle link http://jsfiddle.net/wydsf2vk/

• javascript
• jquery
• html
• css
• google-chrome

Share Improve this question Follow edited Sep 12, 2014 at 12:10 AKG asked Sep 12, 2014 at 11:50 AKGAKG 22111 gold badge33 silver badges99 bronze badges 10

• can you provide us with a jsfiddle example? – Hristo Valkanov Commented Sep 12, 2014 at 11:52
• can you plz put a jsfiddle.net so we can fix it for u – Dany Minassian Commented Sep 12, 2014 at 11:52
• thanks for reply , this is working in jsfiddle but i my project this is not working – AKG Commented Sep 12, 2014 at 11:57
• your using chrome while on jsfiddle ? – Dany Minassian Commented Sep 12, 2014 at 11:58
• hi i have updated jsfiddle link can you please check its not working in js fiddle also – AKG Commented Sep 12, 2014 at 12:05

 |  Show 5 more comments

7 Answers 7

Sorted by: Reset to default 6

Add height property to your css class, to display scrollbar you need to set fix height of your div.

Are you by chance using a track pad instead of a mouse, on OSX? There's some quirk where the scrollbar will be hidden if you're using a track pad. Plug in a mouse and see if it appears.

Set max-height for that .box it will work

You are missing the height CSS property. check snippet below.

.box {
    border-radius: 0px;
    padding:0;
    border: solid 1px #8c8d8e;
    overflow: hidden;
    overflow-y:scroll;
    height: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    opacity: 0.85;
}

<div class="box">
  <p> Hello World 1 </p>
  <p> Hello World 2 </p>
  <p> Hello World 3 </p>
  <p> Hello World 4 </p>
  <p> Hello World 5 </p>
</div>

This is an OLD issue, but I am posting the workaround if its the Trackpad causing your scroll bar to disappear, try the following:

Go to System Preferences. Search for 'Show Scroll Bars' Choose Always.

I just checked your fiddle, that's happening because you've not added the overflow-y: scroll; property to the fiddle. It does work for my version (Chrome too).

http://jsfiddle.net/y8jqsya4/

change your css:-

height:100px 
border-radius: 0px;
padding:0;
border: solid 1px #8c8d8e;
overflow: hidden;
overflow-y:scroll;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #ffffff;
opacity: 0.85;

http://jsfiddle.net/wydsf2vk/2/

本文标签： javascriptoverflowyscroll is not working for chromeStack Overflow