[sergey24]

Заменил код на этот:

<script>
		$(document).ready(function() {
			$(function() {
				doUseful();
				$(window).resize(doUseful);
			});

			function doUseful() {
				var width = $('body').innerWidth();
				var element2 = $('.scroll-pane2').jScrollPane();
				var api2 = element2.data('jsp');
				if (width < 899) {
				$('.block1').removeClass('scroll-pane2');
				$('.block2').addClass('scroll-pane2');
				}
				else {
				$('.block1').addClass('scroll-pane2');
				$('.block2').removeClass('scroll-pane2');
				}
			}
		});
	</script>

При загрузке class присваивается, но начинает работать (создаются блоки и тд) только после изменения размера экрана.

<script>
		$(document).ready(function() {
				doUseful();
			$(function() {
				doUseful();
				$(window).resize(doUseful);
			});

			function doUseful() {
				var width = $('body').innerWidth();
				var element2 = $('.scroll-pane2').jScrollPane();
				var api2 = element2.data('jsp');
				if (width < 1200) {
				$('.block1').removeClass('scroll-pane2');
				$('.block2').addClass('scroll-pane2');
				}
				else {
				$('.block1').addClass('scroll-pane2');
				$('.block2').removeClass('scroll-pane2');
				}
			}
		});
	</script>

А вот этот код присвает class, создаёт все нужные блоки, но не листается. Скролл начинает работать только после изменения размера экрана.
Так же проблема в том, что если открыть браузер с шириной 1300px и сузить до 1100px, то скролл остаётся у всех блоков.