Проблемы с реинициализацией jscrollpane
 

Добрый день. Есть сайт, который использует jscrollpane. Для работы данного плагина требуется добавить class к блоку в котором хотим заменить скролл. Если его ставить изначально в html код, то всё работает отлично. Но у меня он присваивается после загрузки страницы, т.к. требуется присваивать разным блокам в зависимости от размера экрана, после чего отказывается работать (из-за кривых рук). Собственно вот сам код:

<div class="block1">123
456
789</div>
<div class="block2">123
456
789</div>
<div class="block2">123
456
789</div>

$(document).ready(function() {
    $('.scroll-pane2').jScrollPane({
         autoReinitialise: true
  });
$(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');
			api2.reinitialise();
			}
			else {
			$('.block1').addClass('scroll-pane2');
			$('.block2').removeClass('scroll-pane2');
			api2.reinitialise();
			}
		}

PS Использую scroll-pane2, т.к. scroll-pane уже есть на странице и используется в других блоках:)
К слову вот его код:

function explode(){
        var element = $('.scroll-pane').jScrollPane();
	var api = element.data('jsp');
	api.scrollToBottom();
}
setTimeout(explode, 500);

Этот код работает отлично:)

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

<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, то скролл остаётся у всех блоков.

sergey24,
а так?

<script>
  $(window).on("load", 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>

рони,
Всё равно начинает работать только после изменения размера окна.

рони,
В вашем коде нет самого вызова реинициализации или я не прав?

в моём коде есть $(window).on("load", всё остальное ваше, больше идей нет.

попробуйте с костылем заработает или нет

$(window).on("load", function() {
        setTimeout(doUseful,1000);
        $(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');
        }
      }

а лучше даже вот так

$(function() {
        setTimeout(doUseful,2000);
        $(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');
        }
      }