Mouse pointer > image movement isn't laggy anymore

css/style.css

@@ -343,13 +343,12 @@ img {
 }
 /* line 47, ../sass/style.scss */
 #mainImage button {
-  border: 0;
   padding: 5px 20px;
   background: #CCC;
   color: black;
   border: 1px solid #999;
 }
-/* line 53, ../sass/style.scss */
+/* line 52, ../sass/style.scss */
 #mainImage button:hover {
   background: #666;
   color: white;

js/index.js

@@ -6,20 +6,21 @@
 		$zoomImage = $('#zoomImage'),
 		$openZoomBtn = $mainImage.find('button'),
 		$smallImage = $mainImage.find('img'),
-		scrollTimer,
-		//moveTimer,
+		scrollInertiaTimeout,
+		scrollingByCodeTimeout,
 		zoomLayerWidth = $zoomLayer.width(),
 		zoomLayerHeight = $zoomLayer.height(),
 		zoomImageWidth,
-		zoomImageHeight;
+		zoomImageHeight,
+		scrollingByCode = false;
 
 	function openZoom() {
 		$body.css('overflow', 'hidden');
 		$zoomLayer.show();
 		zoomImageWidth = $zoomImage.width();
 		zoomImageHeight = $zoomImage.height();
 		scrollZoomLayerInPercent(0.5, 0.5);
-		setTimeout(function() {
+		setTimeout(function () {
 			handlePointerMovement();
 			handleScroll();
 		}, 0);
@@ -38,11 +39,16 @@
 		var corsaX = zoomImageWidth - zoomLayerWidth,
 			corsaY = zoomImageHeight - zoomLayerHeight;
 
+		scrollingByCode = true;
+
 		$zoomLayer.scrollTop(corsaY * yPercent);
 		$zoomLayer.scrollLeft(corsaX * xPercent);
 
-		console.log('scrollImage', 'corsaX:', corsaX, 'xPercent', xPercent);
-		console.log('scrollImage', 'corsaY:', corsaY, 'yPercent', yPercent);
+		clearTimeout(scrollingByCodeTimeout);
+		scrollingByCodeTimeout = setTimeout(function(){
+			scrollingByCode = false;
+		}, 25);
+
 	}
 
 	function mouseMoveHandler(evt) {
@@ -59,11 +65,12 @@
 	}
 
 	function scrollHandler() {
+		if (scrollingByCode) return;
 		// Scroll happened. Un-handle pointer movement
 		unHandlePointerMovement();
 		// After 50 ms since the last scroll, restart mouse handling pointer movement
-		clearTimeout(scrollTimer);
-		scrollTimer = setTimeout(function() {
+		clearTimeout(scrollInertiaTimeout);
+		scrollInertiaTimeout = setTimeout(function () {
 			handlePointerMovement();
 		}, 100);
 
@@ -85,7 +92,7 @@
 	$zoomLayer
 		.on('click', closeZoom);
 
-	$(window).on('resize', function(){
+	$(window).on('resize', function () {
 		zoomLayerWidth = $zoomLayer.width();
 		zoomLayerHeight = $zoomLayer.height();
 	});

sass/style.scss

@@ -45,7 +45,6 @@ img {
 		cursor: pointer;
 	}
 	button {
-		border: 0;
 		padding: 5px 20px;
 		background: #CCC;
 		color: black;