chayn1k/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
  <div id='container'>
    <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
    amet tincidunt orci placerat in. Integer vitae consequat augue.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
    amet tincidunt orci placerat in. Integer vitae consequat augue.
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
    amet tincidunt orci placerat in. Integer vitae consequat augue.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
    amet tincidunt orci placerat in. Integer vitae consequat augue.
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
    amet tincidunt orci placerat in. Integer vitae consequat augue.
  =
</article>
  </div>
</body>
</html>

## main.js
var __scrolled,
    $container = document.querySelector('#container'),
    $article = document.querySelector('article')
    ;

$container
    .addEventListener('scroll', deferPosition, false);

document.body.addEventListener('mouseup', function(){
  __scrolled && doPosition();
}, true);


function deferPosition(){
  __scrolled = true;
}

function doPosition(){
  __scrolled = false;
  var vw = $container.offsetWidth,
      cw = $article.offsetWidth / 5,
      width = $article.offsetWidth,
      left = $container.scrollLeft,
      index = Math.round(left / cw)
      ;

  $container.scrollLeft = cw * index;

}

## style.css
article {
    -webkit-column-count:5;
    -webkit-column-width: 100%;
    -webkit-column-rule: 1px solid red;
    width: 500%
}


#container {

    overflow: auto;
    height: 150px;
    width: 100%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<link href="style.css" rel="stylesheet">
	<script src="main.js"></script>
	</head>
	<body>
	<div id='container'>
	<article>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
	rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
	Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
	amet tincidunt orci placerat in. Integer vitae consequat augue.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
	rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
	Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
	amet tincidunt orci placerat in. Integer vitae consequat augue.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
	rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
	Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
	amet tincidunt orci placerat in. Integer vitae consequat augue.

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
	rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
	Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
	amet tincidunt orci placerat in. Integer vitae consequat augue.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
	rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
	Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
	amet tincidunt orci placerat in. Integer vitae consequat augue.
	=
	</article>
	</div>
	</body>
	</html>
	var __scrolled,
	$container = document.querySelector('#container'),
	$article = document.querySelector('article')
	;

	$container
	.addEventListener('scroll', deferPosition, false);

	document.body.addEventListener('mouseup', function(){
	__scrolled && doPosition();
	}, true);


	function deferPosition(){
	__scrolled = true;
	}

	function doPosition(){
	__scrolled = false;
	var vw = $container.offsetWidth,
	cw = $article.offsetWidth / 5,
	width = $article.offsetWidth,
	left = $container.scrollLeft,
	index = Math.round(left / cw)
	;

	$container.scrollLeft = cw * index;

	}
	article {
	-webkit-column-count:5;
	-webkit-column-width: 100%;
	-webkit-column-rule: 1px solid red;
	width: 500%
	}


	#container {

	overflow: auto;
	height: 150px;
	width: 100%;
	}