scrollTargeting.js Demo

A tiny jQuery plugin that addresses a subjective issue with scrolling behaviours in the Safari web-browser on OS X. May also work with and/or be relevant to other browsers and platforms.

The textareabelow exhibits regular scroll behaviour, unaffected by the scrollTargeting.jsplug-in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor nisi nec metus placerat blandit. Nunc luctus purus in sapien consectetur et sodales augue vestibulum. Quisque convallis vulputate lacinia. Sed non massa et ipsum sollicitudin molestie sed at urna. In pretium adipiscing cursus. Curabitur sit amet erat mi, eget facilisis sem. Curabitur augue lorem, gravida a fermentum ut, vestibulum sit amet lorem. Sed et ligula nulla. Pellentesque aliquam, eros sit amet aliquam imperdiet, magna eros euismod dolor, eget feugiat diam leo at odio. Cras volutpat volutpat tortor, nec congue elit ornare ac. Donec elit dolor, aliquam egestas dapibus vitae, lacinia eu est. Duis blandit pellentesque aliquet. Vestibulum pharetra fringilla sagittis. Fusce ut urna massa. Sed id dolor vitae nulla gravida aliquam at scelerisque nunc. Aenean scelerisque, mi eget ullamcorper cursus, velit dolor ornare risus, id vestibulum diam ipsum ac ipsum. Pellentesque est eros, malesuada eget varius auctor, posuere ac neque. Nunc elit est, bibendum at porttitor a, facilisis nec eros. Etiam eu dui lacus. Morbi luctus vestibulum sollicitudin. Nunc quis eros et arcu dictum adipiscing. Integer ut erat et lectus auctor dictum. Sed mattis odio arcu. Nunc vulputate ante vel orci sollicitudin tristique venenatis at ante. Vivamus pulvinar mollis nibh vitae iaculis. Nam turpis felis, varius eget lobortis varius, luctus nec mauris. Aliquam nec orci id ipsum aliquet ornare nec id odio. Suspendisse ut felis pretium erat venenatis vestibulum. Aliquam at nisi vel arcu ultrices lobortis. Quisque vitae nunc ac nisl semper suscipit elementum ut eros. Praesent id arcu commodo velit lacinia molestie vel sit amet purus. Proin vitae dui magna. In nec lacus eget urna luctus adipiscing. Etiam a felis metus. Cras rhoncus imperdiet interdum. In massa augue, aliquet id tempus eu, blandit vel libero. Praesent lacinia justo et velit lacinia at fermentum elit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sagittis imperdiet quam, et commodo neque commodo nec. Pellentesque orci arcu, vestibulum sed ultrices at, iaculis quis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce fringilla laoreet lacus, quis auctor turpis dictum sit amet. Donec lorem purus, mattis ultrices consectetur eu, pellentesque id turpis. Aliquam non massa eu nisi porttitor vestibulum et ut urna. Vestibulum sed velit a metus porttitor ultricies eget scelerisque mi. In magna arcu, placerat at consectetur ac, commodo quis risus. Curabitur sed convallis augue. Nam at quam ut lorem tempor imperdiet. Nullam sed libero augue, a ornare risus. Nulla mattis diam et leo iaculis sed ullamcorper erat elementum. Vivamus bibendum sagittis elit a mattis. Morbi porta felis mollis velit molestie scelerisque. Praesent fermentum tempor aliquet. Curabitur vitae laoreet turpis. In malesuada volutpat condimentum. Integer nulla magna, tempor ut varius sed, scelerisque in nunc. Curabitur eu orci vitae orci facilisis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ut nisi metus, eu lacinia est. Ut non augue nibh. Maecenas aliquet tellus nec quam pharetra porttitor. Cras eu purus sapien. Nulla neque magna, aliquam quis viverra mattis, sagittis quis elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit cursus suscipit. Ut varius, sapien eu lacinia congue, odio dui accumsan elit, sit amet ultricies massa lacus vel nisi.

Pellentesque est eros, malesuada eget varius auctor, posuere ac neque. Nunc elit est, bibendum at porttitor a, facilisis nec eros. Etiam eu dui lacus. Morbi luctus vestibulum sollicitudin. Nunc quis eros et arcu dictum adipiscing. Integer ut erat et lectus auctor dictum. Sed mattis odio arcu. Nunc vulputate ante vel orci sollicitudin tristique venenatis at ante. Vivamus pulvinar mollis nibh vitae iaculis. Nam turpis felis, varius eget lobortis varius, luctus nec mauris. Aliquam nec orci id ipsum aliquet ornare nec id odio. Suspendisse ut felis pretium erat venenatis vestibulum. Aliquam at nisi vel arcu ultrices lobortis.

The textareabelow is using scrollTargeting.js's behaviour #1. If the mouse cursor is over the textareathen scrolling will be limited to the textareaalone.

The textareabelow is using scrollTargeting.js's behaviour #2. If the textareagets focus(ie: is clicked) then scrolling will be limited to this textareaonly, until an alternative region gets focus.

The textareabelow is using scrollTargeting.js's behaviour #3. This is a combination of behaviours #1 & #2. If the mouse cursor is over this textareaor it gets focusthen scrolling will be locked to it.