nim23

IScroll 5 with DOM change detection

When implementing a custom scrollbars there’s a need to detect changes in height of the element to which you are applying the scrollbars to, as the height of the scrollbars need to be adjusted based on the content’s height. We also need to take into account that the content could change and height needs to be recalculated i.e paging on queries could yield 10 results, whilst on the last page it could yield just 5 results, and these changes need to be accounted for by the scrollbar. And the same problem arises when getting content asynchronously, because whilst the content is empty on initial render it gets rendered only after successful fetch of the required data and we should calculate the scrollbar height once the content is available which is hard to determine as the operation is asynchornous.

Different libraries and plugins deal with the problem separately.

jQuery Scrollbar runs a timeout every 300ms to account for any changes in the DOM. https://github.com/gromo

	<div>
	<!-- ko if:inProgress -->
	<img data-bind="attr: { src: progressIcon }" />
	<!-- /ko -->
	</div>

	<!Doctype html>
	<html>
	<body>
	<div class='container'>
	<div class='row'>
	<h1>Minimal grid framework</h1>
	<h3>Features</h3>
	<ul>
	<li>12 column grid</li>
	<li>Swap columns on different breakpoints</li>

	/*
	Watch tasks that looks for changes in files and automatically copies them
	over to BridgeIT, DesginLanguage and LatestBuild.
	Handy when making small tweaks in css and js files saves the headache of copying
	them to each location.
	Will have to be used from the command line with gulp run-watch command.
	Isn't used by the component library solution build process.
	*/
	var DESIGN_LANGAUAGE_PATH = '../../../DesignLanguage/WebApp/DesignLanguage';
	var LATEST_BUILD_PATH = '../../../LatestBuild/ComponentLibrary';

	<!Doctype html>
	<html>
	<body>
	<div class='container'>
	<div class='row column'>
	<div class='col-md-8 cl-link-group'>
	<div class='col-md-4 cl-link-group-left'>
	<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAD1CAYAAABEKImOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMDljMGE2MS1jODc0LTQ4NTUtODEwMC1jNDNhMzIzNGJkMzgiIHhtcE1

	<!Doctype html>
	<html>
	<body>
	<div class='container'>
	<div class='row column'>
	<div class='col-md-8 cl-link-group'>
	<div class='col-md-3 cl-link-group-left'>
	<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOYAAAD1CAYAAABEKImOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMDljMGE2MS1jODc0LTQ4NTUtODEwMC1jNDNhMzIzNGJkMzgiIHhtcE1

	<div class='cl-group-query'>
	<div class='cl-left'>
	<img title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUIAAAFCCAYAAACErdScAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozM2Y1NDU0NS05OGYzLTRmZTMtYjdmYS1mNjZjN2E2YTgzOGIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Nzk2NzYxMzYxQTRFMTFFNDgxOEQ4MDU4MjMzMzFFOUEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Nzk2NzYxMzUxQTRFMTFFNDgxOEQ4MDU

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	<style id="jsbin-css">
	*{
	box-sizing: border-box;