Scrolling - non-intrusive, functional scrolling for UI elements
Summary of features
COLOURcode integrates the very capable NiceScroll jQuery plugin, with its vast list of configuration parameters. The template has been developed such that you only need to add a class of .scrolling to the target element, and then a set of data-attributes if you wish to alter the default behaviour e.g. data-scrolling-cursorwidth="20", data-scrolling-cursoropacitymax="0.7".
At a glance
- Supports DIVs, iframes, textareas, and page (body) scrollbars.
- Tested on all major browsers on the desktop.
- Animation frame support for smooth scrolling and cpu efficiency.
Nicescroll, hiding scrollbar ( in a default panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-default.scrolling
Nicescroll, hiding scrollbar ( in a coloured panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-brand1.scrolling
Nicescroll, hiding horizonatal (in .panel-body)
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates.
Markup for above: .panel.panel-gold .panel-body.scrolling
Nicescroll, always visible ( in a default panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-default.scrolling and data-scrolling-autohidemode="false"
Nicescroll, always visible ( in a coloured panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-brand1.scrolling and data-scrolling-autohidemode="false"
Nicescroll, visible horizonatal (in .panel-body)
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates.
Markup for above: .panel.panel-gold .panel-body.scrolling and data-scrolling-autohidemode="false"
10px wide scrollbar ( in a default panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-default.scrolling and data-scrolling-cursorwidth="10"
15px wide scrollbar ( in a coloured panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-brand1.scrolling and data-scrolling-cursorwidth="15"
20px at 70% opacity (in .panel-body)
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-gold .panel-body.scrolling and data-scrolling-cursorwidth="20", data-scrolling-cursoropacitymax="0.7"
Red, 10px, 20% inactive ( in a default panel )
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-default.scrolling and data-scrolling-cursorwidth="10", data-scrolling-cursoropacitymin="0.2", data-scrolling-cursorcolor="#bb3531"
20px, 10px rad. 25% inactive (in .panel-body)
United Arab Emirates
The United Arab Emirates, sometimes simply called the Emirates or the UAE, is a country located in the southeast end of the Arabian Peninsula on the Persian Gulf, bordering Oman to the east and Saudi Arabia to the south, as well as sharing sea borders with Qatar and Iran. In 2013, the UAE's total population was 9.2 million, of which 1.4 million are Emirati citizens and 7.8 million are expatriates. Established in December 1971, the country is a federation of seven emirates as shown below.
| Emirate | Capital | Population 2008 | % of total |
| Abu Dhabi | Abu Dhabi | 1,548,655 | 31.2% |
| Ajman | Ajman | 372,923 | 7.5% |
| Dubai | Dubai | 1,770,533 | 35.6% |
| Fujairah | Fujairah | 137,940 | 2.9% |
| Ras al-Khaimah | Ras al-Khaimah | 171,903 | 3.4% |
| Sharjah | Sharjah | 895,252 | 18.0% |
| Umm al-Quwain | Umm al-Quwain | 69,936 | 1.4% |
| UAE | Abu Dhabi | 4,967,142 | 100% |
Markup for above: .panel.panel-gold .panel-body.scrolling and data-scrolling-cursorwidth="20", data-scrolling-cursoropacitymin="0.25", data-scrolling-cursorborderradius="10"
Animate a scroll with Velocity
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
5. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
6. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nicescroll markup for above: .panel.panel-green .panel-body.scrolling and data-scrolling-cursorwidth="12", data-scrolling-cursoropacitymin="0.25"
Velocity.js animation is covered in depth on our Animation page in the UI section.