Mobiscroll 2.1 Beta

We’ve been working on this release for a while now, and we’re proud to announce 2.1 beta.
Let’s see some of the highlights.

1. New display modes

Besides modal and inline we have three new display modes:

  • Bubble
  • Docked top
  • Docked bottom

These display modes are enahnced with scrollLocking. For known issues go here.

2. Handling of select optGroups

There were some reports that mobiscroll didn’t work with selects containing optGroups. That is fixed now.
By default the optGroups are ignored, and only the options are loaded into one list. Above this you can choose to not ignore the groups and let mobiscroll render two wheels.
The first wheel will hold the groups and the second wheel will hold the underlying options.
Check out this development preview about working with optGroups.

3. Show/Hide Animations

We added the possibility to choose from a number of animations. These are built in show/hide animations for modal and bubble display modes. The docked mode comes with a slide animation which cannot be overridden.

4. Performance optimizations

We changed several things in the mobiscroll core. Particularly the rendering of the scroller markup was made more modular. We can now re-populate specific wheels. For all the changes check the changelog.

A word of caution

  • We added scroll locking to modal, bubble and docked modes. What that does, it disables the screen scrolling, and only lets you scroll the wheels. This is applied to the touch events only. The desktop renderings will have scrolling.
    We did notice some issues when scrollLock enabled on android 2.3 browsers. Fast flicking will move the whole page instead of just positioning the wheels.
    The scrollLock is true by default, but you can explicitly disable it with the scrollLock: ‘false’ option.
  • Animations: We added show/hide animations which are controlled by the ‘animate’ option. There are known rendering and support issues on certain Android devices. No known issues on iOS.

Changelog 2.1 Beta



  • Added: new display properties, which controls where the scroller is positioned: ‘modal’, ‘bubble’, ‘top’, ‘bottom’
  • Added: ‘anchor’ property to specify the anchor element for positioning, if ‘display’ is set to ‘bubble’
  • Added: ‘animate’ property to specify predefined animations in ‘modal’ and ‘bubble’ modes, during the show/hide of the scroller: ‘fade’, ‘flip’, ‘pop’, ‘swing’, ‘slidevertical’, ‘slidehorizontal’, ‘slidedown’, ‘slideup’
  • Added: ‘scrollLock’ setting to disable page scrolling in modal/bubble/docked display modes. Default is ‘true’
  • Added: ‘changeWheel’ public method, which takes the wheelindex as argument, and regenerates that wheel based on the wheel object
  • Changed:’readonly’ setting now takes an array too, with the boolean values for each wheel

Select preset

  • Added: ‘group’ and ‘groupLabel’ options to render two wheels based on optgroups
    Datetime preset
  • Added: ‘showNow’ and ‘nowText’ options, which renders an additional ‘Now’ button (if display is not inline)


  • Changed: iOS theme is updated



  • Fixed: In ‘mixed’ mode, if wheel was scrolled and stopped with a tap, +/- buttons remained hidden


This being a beta release there can be bugs. We’re looking for your help to test it. Get it here (Make sure you choose beta).
Let us know if there are any issues!

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!

Tags: ,