Magic Mouse Horizontal Scroll Bug on Chrome

by bryandowning

HTML

<div id="box">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dapibus quam. Nunc sit amet dui et nisi lobortis elementum quis id enim. Ut porta adipiscing lacinia. In eu tortor lectus. Nunc nec leo pellentesque felis vehicula fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis mollis sapien in vehicula dignissim. Mauris accumsan interdum tortor. Nam a tellus a metus molestie lacinia. Morbi non risus ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent non venenatis mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer viverra elementum metus, ac dignissim lacus iaculis id.
	</p>

	<p>
		Pellentesque eleifend urna eu augue viverra, convallis hendrerit neque condimentum. Sed accumsan nisi id luctus rutrum. Proin eleifend dapibus ipsum id rutrum. Sed non arcu nisi. Nulla in eleifend mauris. Nullam sed tincidunt diam. Vivamus tincidunt malesuada sapien malesuada posuere. Nullam augue leo, lacinia et tincidunt vel, congue et urna.
	</p>

	<p>
		Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec lectus lectus, fringilla eu imperdiet vitae, sollicitudin ut velit. Curabitur vitae euismod eros, molestie sodales purus. Sed in turpis metus. Vestibulum id nisl molestie, pellentesque libero id, gravida tellus. Aliquam in diam dolor. Vestibulum a molestie urna. Sed euismod consectetur vulputate. Sed eu neque porta, vehicula felis vitae, eleifend lorem. Praesent ultrices erat sed tempus mollis. Donec at commodo magna. Maecenas pharetra erat metus, vitae fermentum ligula blandit nec. Etiam metus nisi, accumsan id augue sit amet, ornare dignissim leo. Curabitur sed odio odio.
	</p>

	<p>
		Suspendisse rutrum sit amet massa elementum vehicula. Etiam volutpat purus id odio commodo blandit. Vestibulum sodales mauris justo, vitae fermentum tortor ullamcorper vel. Integer volutpat odio vel orci commodo, id...

CSS

div {
    
    width: 200px;
    height: 400px;
    overflow: auto;
    
    background: #ddd;
    padding: 1em;
    
}
p { width: 600px; }

CoffeeScript

$box = $('#box');

$box.on 'scroll', ->
    top = $box.scrollTop()
    left = $box.scrollLeft()
    console.log "Scrolled   left: #{left}, top: #{top}"