1

I searched internet found many including How to hide scrollbar but still can scroll up/down but could not solve my problem.

I need to change color of scroller as my required eg : BLACK and also reduce width of scroller (and do not show following image if possible but content should be scroll vertically).

My view part:

<ui:composition>
    <h:form id="menuId">
        <ul id="navigation" class="nav">
            <ui:repeat value="#{navigationRoleList}" var="menuDTO">
                <li class="#{sessionScope['navId'] eq menuDTO.parentMenu.id ? 'act' : ''}">
                    <a href="#"  class="#{menuDTO.parentMenu.menuClass}">  <h:outputText value="#{menuDTO.menuText}"/></a>
                    <ul  class="#{sessionScope['navId'] eq menuDTO.parentMenu.id ? 'navOver' : ''}">
                        <ui:repeat value="#{menuDTO.bankUserMenus}" var="submenu">
                            <li>
                                <h:commandLink value="#{submenu.menuText}"  action="#{loginBean.getNavigation}">
                                    <f:param value="#{submenu.menuAction}" name="link"/>
                                    <f:param value="#{menuDTO.parentMenu.id}" name="navId"/>
                                </h:commandLink>
                            </li>
                        </ui:repeat>
                    </ul>
                </li>
            </ui:repeat>
        </ul>
    </h:form>
</ui:composition>

and my css:

ul#navigation {
border: 0 none;
width: 179px;
height: 360px;
padding: 10px 0;
position: relative;
}

ul#navigation li {
display: inline;
list-style: none;
float: left; /*For Gecko*/
width: 100%;
/*height:20px;*/
padding: 0;
margin:  0 0 5px;
}

ul#navigation ul {
margin: 0;
border: 0 none;
width: 170px;
list-style: none;
display: none;
position: absolute;
left: 179px;
top: -50px;
z-index: 99;
padding: 50px 0 0 10px;
height: 550px;
overflow: auto;
}

ul#navigation ul.navOver {
display: block;
}

and got following output but I want to hide this image (if possible) otherwise reduce the width.

Scroller image

Thanks.

Community
  • 1
  • 1
Yubaraj
  • 3,800
  • 7
  • 39
  • 57
  • 1
    So how does a user recognize that there is scrollable content? Your plan is nonsensical from a usability perspective. And there is no universal way of doing so, though most browsers have proprietary features for this. But you really shouldn't do this!!! Don't ever change the look & feel the user is accustomed to! – Netsurfer Sep 20 '13 at 12:06
  • 1
    Thanks for your reply and good question sir, if I hide scroll user may not know there is scroll-able content so I want to change the color and I will also provide help Documentation like: `if color is black there may be more content so scroll up/down to see`. But we may reduce the width of scroll. – Yubaraj Sep 20 '13 at 12:12
  • @Netsurfer the will be a scroll bar visible – Sudharsun Sep 20 '13 at 12:26
  • OK, I see. But as said before, no no standardized method. For how many browsers do you want to write proprietary code? And how many didn't you addressed anyway? Users are accustomed to the look of their scrollbars. So they easily can identify them and know how to use them. I am still of the opinion, that your plan offends usability and accessibility - both things you should never do. Customize your design like millions of other sites, too! It might have a good reason, that this is not part of the standards ..! :-P – Netsurfer Sep 20 '13 at 12:50
  • @Netsurfer Dear sir, from your statement `both things you should never do`. It means we can't reduce the width of `scroll` also ? – Yubaraj Sep 20 '13 at 14:43
  • @Kalathoki: No, as I wrote in some browsers you _can_! But for what? To get a few pixel in width? And please also consider, that some users might have set the scrollbar to an extra width cause of some disabilities. So it is always a good design priciple to **never touch the UI!**. – Netsurfer Sep 20 '13 at 14:51

2 Answers2

1

A solution for webkit browsers :

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background: #bfb6a3;
}
Community
  • 1
  • 1
Mmmh mmh
  • 5,334
  • 3
  • 21
  • 29
1

CSS part to style all the scroll bar in your site.
Add selectors to style specific scroll bar in your site.

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

Change this part to get the color

background: rgba(255,0,0,0.8);

hope this might help. for further styling you scroll bar

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

  • ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements
  • ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar
  • ::-webkit-scrollbar-track addresses the empty space “below” the progress bar
  • ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb)
  • ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element
  • ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet
  • ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements

check this out http://css-tricks.com/search-results/?q=scroll+bar

Sudharsun
  • 741
  • 6
  • 23