How to remove only bottom scroll bar completely from UI in css

Question

I am removing horizontal scroll bar completely from bottom. I tried this below ways.

1st way

Hide html horizontal but not vertical scrollbar

This way is working when the page is first loaded. But when I click on the UI. Bottom scroll bar is appeared but not scrollable and disabled. So UI shrinks slightly and disabled scrollbar is shown at the bottom.

2nd way

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

This removed all scroll bar from UI. Not even the vertical scroll bar is shown. Even onclick, neither vertical nor horizontal scroll bar is shown.

Is there a way to remove horizontal scroll bar completely in this way ?Not even shown when the UI is clicked.

If it is a normal web site, you should structure and style your page, so that it doesn't overflow horizontally — Said Kholov, Nov 27 '15 at 04:38
Either way, `overflow-x:hidden` has been confirmed to work. Just tested — Richard Hamilton, Nov 27 '15 at 04:38
sure it does work. Good solution. But it is a good practice not letting a page oversize browser window @RichardHamilton — Said Kholov, Nov 27 '15 at 04:40

Richard Hamilton · Answer 1 · 2015-11-27T04:42:41.563

4

By bottom scroll-bar, I assume you are referring to the horizontal scrollbar. This appears when you have content that overlaps the width of your element.

As a best practice, you should align your content so it's viewable without horizontal scrolling. You might even want to include some padding to make it easier on the eyes.

But if it's required, you can set the overflow-x property and set to hidden.

With the hidden property, the content is clipped, scrolling is disabled and the scrollbar doesn't appear.

http://www.w3schools.com/cssref/css3_pr_overflow-x.asp

edited Nov 27 '15 at 04:42

answered Nov 27 '15 at 04:36

Richard Hamilton

25,478
10
60
87

But the problem is when I click on the ui. The bottom scroll bar is appreared. But it is disabled. I do not even want to show disabled scroll bar when ui is clicked. Now it is happening in Chrome. – Wai Yan Hein Nov 27 '15 at 04:48
@Waiyan You might want to share some more code with us if it's not working correctly. – Slava Knyazev Nov 27 '15 at 04:50
What do you mean by clicking on ui. Can you show an example? I cannot replicate this problem. – Richard Hamilton Nov 27 '15 at 04:50
click on anywhere on user interface. – Wai Yan Hein Nov 27 '15 at 04:51
@Waiyan you should create a jsFiddle showing the issue. We need to see your html to help any further. – Wesley Smith Nov 27 '15 at 05:26
Nothing more. Contains a content container inside body. And contents inside it – Wai Yan Hein Nov 27 '15 at 07:13

How to remove only bottom scroll bar completely from UI in css

1 Answers1