CODEWITHSUNDEEP
javascriptcssoverflowandroid-browseropera-mobile
Danny Fox
Danny Fox

Reputation: 40799

How to make scrollbars in android browsers

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,

Upvotes: 2

Views: 817

Answers (2)

Eric L.
Eric L.

Reputation: 3362

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

Upvotes: 0

kishu27
kishu27

Reputation: 3120

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

Upvotes: 3

Related Questions