Categories

.scrollbox()

Categories: UI

.scrollbox( [ options ] )Returns: jQuery

Plugin: jQuery.ui.scrollbox

Description: Apply the Scrollbox widget for each element in the set of matched elements.

  • .scrollbox( [ options ] )

    version added: 1.2

    options   A map of additional options pass to the widget.

Scrollbox changes the scroll UI of a content element. The element not longer has permanent visible scroll bars. Only the drag elements will be visible while scrolling, respectively for a short moment on enter the element. The drag elements don't reduce the content space of the element, they are just visual overlays.

Different methods to scroll the content of the element are supported.

  • scrolling with mousewheel or trackpad
  • moving the drag elements via mouse
  • moving the content with your finger on devices with touch support
  • Apply the Scrollbox widget for element with id="scrollbox".

    HTML:
    <div id="scrollbox">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <br />
      sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, <br />
      no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
      <p style="white-space: nowrap;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
      <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    Code:
    $('#scrollbox')
        .scrollbox({
            horizontal: true,
            vertical  : true,
            loackAxix : true
        });
  • disabled

    version added: 1.2

    Disables (true) or enables (false) the scrollbox. Can be set when initialising (first creating) the scrollbox.

    Default: false

  • horizontal

    version added: 1.2

    A boolean indication whether to enable horizontal scrolling.

    Default: .css("overflow-x")

  • lockAxis

    version added: 1.2

    A boolean indication whether to enable smart touch scrolling. When dragging starts on one axis the other is locked.

    Default: false

  • vertical

    version added: 1.2

    A boolean indication whether to enable vertical scrolling.

    Default: .css("overflow-y")

  • create

    version added: 1.2

    This event is triggered when scrollbox is created.

  • destroy

    • .scrollbox( "destroy" )

      version added: 1.2

    Remove the scrollbox functionality completely. This will return the element back to its pre-init state.

  • disable

    • .scrollbox( "disable" )

      version added: 1.2

    Disable the scrollbox.

  • enable

    • .scrollbox( "enable" )

      version added: 1.2

    Enable the scrollbox.

  • option

    • .scrollbox( "option", optionName , [ value ] )

      version added: 1.2

    Get or set any scrollbox option. If no value is specified, will act as a getter.

  • option

    • .scrollbox( "option", options )

      version added: 1.2

    Set multiple dialog options at once by providing an options object.

  • widget

    • .scrollbox( "widget" )

      version added: 1.2

    Returns the .ui-dialog element.

  • widget

    • .scrollbox( "widget" )

      version added: 1.2

    Set multiple dialog options at once by providing an options object.