css-overflow hidden (hidden scroll bar, still can scroll)

The company's system, on the PC side can manage our public number, in the Release module page when there is a preview function, rendering the page on the phone side of the style.

The procedure is very simple, one will be finished, but in the preview content too long when the mobile phone frame will have a scroll bar, affecting the beautiful, so I want to remove it, there is a way personally feel very useful, recorded.

idea : write two div nested together, height is fixed, outside div fixed width and overflow:hidden; The width of the div inside is wider than the outside, preferably the width of the scroll bar, overflow-y: auto;

The initial implementation is:

<!--Phone Preview -<Divclass= "Preview-layer"><Divclass= "PREVIEW-BG"></Div><Divclass= "Preview-phone">
<DivID= "preview-html">
</Div>
</Div></Div>

Combine ideas to modify:

<!--Phone Preview -<Divclass= "Preview-layer"><Divclass= "PREVIEW-BG"></Div><Divclass= "Preview-phone">
<Divclass= "Preview-container"><DivID= "preview-html">
</Div></Div>
</Div></Div>

Div.preview-container{position:Absolute;width:230px;Height:405px;Top:62px; Left:15px;Border:2px solid #000;Border-radius:5px;Outline:None;Background-color:#fff;Overflow:Hidden; }

#preview-html {        width:247px;         height:405px;         overflow-y: auto;    }

The results are as follows:

css-overflow hidden (hidden scroll bar, still can scroll)