How to make scrollbars in android browsers

Question

How to use overflow-y in android browsers, for example in opera mobile? If I create a div with overflow-y style, thenn it wont work, like in the desktop browsers.

So I want to make vertical-scrollable div, without using any libraries. Please give me some instructions.

Thanks in advance,

score 3 · Accepted Answer · answered Mar 13 '12 at 10:29

3

Make two divs:

<div class='parent-of-scroller'>
    <div class='scrollable-item'>
        ... your content ... 
    </div>
</div>

For outer div, set overflow:hidden control the placement of scroll position of internal div by managing its margin-top using javascript. I believe you can make use of the touch events to control the scroll position of the internal div

answered Mar 13 '12 at 10:29

kishu27

3,140
2
26
41

Same problem here - but do not understand all of the solution. How do you "manage its margin-top using javascript"? – Mateng Aug 31 '12 at 10:20
by managing the margin-top, I meant changing its integer value. You can negate it to scroll up (go below zero) and opposite way too. You would have some event under which you will want to scroll the section and a number of pixels (xx) that determines how much you want to scroll. Use `element.style.marginLeft="xx"`; – kishu27 Sep 02 '12 at 17:08

score 0 · Answer 2 · answered Oct 30 '14 at 12:18

For future posterity, Opera Mobile 12/Classic, the browser you tagged in your question, has very specific criteria that must be followed in order to get overflow: scroll or overflow: auto to work:

Element height (or width) alone is not enough to get Opera Mobile 12 to overflow an element and it will expand elements unless absolutely positioned with top and bottom values. This sucks but when absolutely positioned, Opera Mobile 12 does add a scrollbar to overflow elements but there is no support for touch gesture scrolling and the scrollbar controls are flaky.

So, to get Opera Mobile to actually add scrollbars and overflow a div you need to alter Kishu's example a little:

<style>
#parent-of-scroller {
  position: relative;
  height: [whatever]
}
#scrollable-item {
  position: absolute;
  top: 0px;
  bottom: 0px;
}
</style>

<div class='parent-of-scroller'>
    <div class='scrollable-item'>
        ... your content ... 
    </div>
</div>

The Opera ≥9.5 CSS hack _:-o-prefocus, body:last-child .your-selector-here might assist you.

From http://barrow.io/overflow-scrolling

How to make scrollbars in android browsers

2 Answers2