Iframe css scrollbar

Question

How do I go about changing cssthe scrollbar iframe? My problem with the current scrollbar in my iframe is that the frame is not very wide, and the scrollbar in it is cumbersome and takes up too much space ... Using it "scrolling="no"causes the scrollbar to disappear, but then the user cannot scroll. .. By way, My Google Chrome browser ...

Answer 1

This is css for changing scrollbars in iframes in chrome

body   {
position: absolute;
overflow-y: scroll;
overflow-x: hidden;
}
html {
overflow-y: auto;
background-color: transparent;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
display: none; 
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
height: 30px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece  {
background-color: #3b3b3b;
-webkit-border-radius: 16px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #666;
border: 1px solid #eee;
-webkit-border-radius: 6px;
}

Answer 2

You cannot create a scroll bar (another to turn it on and off) with CSS in general.

, , IE Opera.

Chrome .

, WebKit . , Chrome WebKit , .

JavaScript, jScrollPane, , , .

, - , , - " .

, , , " ".

Answer 3

You can do this by getting the scroll element in the frame, for example using jquery:

$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px")

But, as others have said, this is not a very pleasant solution.