FleXcroll Safari Test Page

Samples

fleXcroll version 1.8.2 and up detects older and buggy Safari's and blocks them from running fleXcroll, but it allows the latest Webkits which should run fleXcroll perfectly, and hopefully this will include the upcoming Safari version 3.

fleXcroll can cope with dynamic updates, and can be controlled from outside:
Clear Test Div : Add P : Remove P : Switch wide/narrow
Move Scrollbars : Scroll content to 50px left, 50px down

Features:
  • New: Re-coded entirely with DOM methods, no more destructive innerHTML, gets along much better with other standards obedient scripts regardless of execution order
  • New: Better Opera9 support
  • New: New method to do content scroll in pixels (element.contentScroll), in addition to the scrollbar-move simulation (element.commitScroll)
  • New: Better keyboard handling
  • New: Re-programmed backend with only a single global function laying around.
  • Embedded accessibility addons:
    • Mousewheel Support (IE, Firefox, Opera9)
    • Keyboard focusability and keyboard scrolling (IE, Firefox) (Opera cannot fully make use of this feature)
  • Enhanced accessibility behaviours (mousewheel can scroll horizontally when horizontal bar is hovered or the element is only a horizontal scrollable element, making it a better option than OS default scrollbars when user has a single mousewheel.
  • Control scrollbars from outside using the commitScroll method
  • Can cope with dynamic changes to scroll size (on window resize, on text resize, on window load)
  • Updates itself everytime a scrollbar is clicked, so your content is accessible if any size change is missed, great for firefox users who like to change their font sizes after the page is loaded!
  • You can manually tell flexcrolled div to update its size, allowing you to inject dynamic content into fleXcrolled content
  • Works with IE7Beta2
  • Fully customizable look using CSS only, no script editing to change the look.
  • No limit on how many scrollers there can be on a page
  • Each scroller on page can have its own style
  • Auto decide whether horizontal or vertical scrollbars are needed.
  • Support for adding custom scrollbars to absolute positioned and floated elements
  • Proper support for padding and borders without the need of an extra wrapper div inside the custom-scroll-bar element
  • Mimics default browser behaviour when deciding which scroll bars are to be used*
  • No extra markup needed**. Please check the html source.
  • No inline javascript needed (Can be run externally)
  • If the user has turned off javascript or the user agent has no javascript capability, there is no accessibility problems as the page falls back to OS default scrollers, please check with javascript turned off.
  • Uses only DOM methods.
  • Cross-browser, works with Opera, Firefox and IE down to IE5.0
  • Free for non-commercial use.
  • No extra libraries needed, all code in one compact but readable code.
  • Some more I forgot.

*There are a few situations where it behaves differently.
**A wrapping div would not hurt, tho.

Top

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.

Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.

Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.

Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.

Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.

Bottom

This is a test page where I do not block Safari.