$ (window) .load (function() не всегда работает

Question

Я пытаюсь реализовать scrollbar plugin на div на моем веб-сайте, но перед этим я сталкиваюсь с несколькими проблемами. Прежде всего, он должен был работать как это:

jQuery(document).ready(function ($) { 
    "use strict"; 
    $('.chat-messages').perfectScrollbar({suppressScrollX: true}); 
    }); 

Но я только мог заставить его работать так:

$(window).load(function() { 
    "use strict"; 
    $('.chat-messages').perfectScrollbar({suppressScrollX: true}); 
}); 

Но с window.load сценарий не кажется, работает все время, или, по крайней мере, полоса прокрутки не всегда отображается.

Я не очень хорошо знаком с js или jquery, но вставил файл src perfect-scrollbar.js в папку, и я называю это обычно следующим: <script src="http://domain.com/javascript/perfect-scrollbar.js"></script> на заголовке и помещая код, который я описал выше, с окном . груз сразу после этого между <script></script>. Я предполагаю, что это конфликт с другим документом готов так что я искал в Интернете для решения и других способов, чтобы загрузить его, и я нашел штуковину не конфликтной и пытался реализовать так:

$.noConflict(); 
jQuery(document).ready(function($) { 
    "use strict"; 
    $('.chat-messages').perfectScrollbar({suppressScrollX: true}); 
    }); 
}); 

, но до сих пор нет результатов , единственное, что это делает, - это остановить работу jQuery веб-сайта. Кто-нибудь может мне с этим помочь? спасибо заранее

Answer 1

Большое спасибо за вашу помощь, ребята, я нашел этот способ решения здесь: [src]

var visible = true; 
setInterval(
function() 
{ 
    if(visible) 
     if($('#element').not(':hidden')) 
     { 
      visible = false; 
      "use strict"; 
      $('.chat-messages').perfectScrollbar({suppressScrollX: true}); 
     } 
    else 
     if($('#element').is(':hidden')) 
     { 
      visible = true; 
      // do something 
     } 
}, 1000); 

Answer 2

Проблема с

jQuery(document).ready(function ($) { 
    "use strict"; 
    $('.chat-messages').perfectScrollbar({suppressScrollX: true}); 
}); 

является то, что вы уезжаете $ неопределенными в вашей локальной области, называя параметр вашей анонимной функции с этим идентификатором. jQuery не передает никаких аргументов этой функции, но ваше объявление параметра маскирует глобальное определение $. Если вы не используете режим без конфликтов, то $ уже будет доступен в глобальном масштабе, так что следующее должно работать:

$(document).ready(function() { 
    "use strict"; 
    $('.chat-messages').perfectScrollbar({suppressScrollX: true}); 
}); 

Как и в сторону, точка noConflict, чтобы избежать столкновения с другим кодом, который может опираясь на глобальное определение $, которое отличается от использования jQuery $ в качестве псевдонима для jQuery.

Answer 3

Я протестировал, и document.ready должен работать нормально.

CSS

.chat-messages { 
    position: fixed; 
    height: 300px; 
    overflow: hidden; 
} 

EDIT:

Поскольку вы расчесывать это с другими скриптами, возможно, попытаться объявить свой селектор в качестве переменной на самом верху.

JQuery

$(function() { 
    var $chat = $('.chat-messages'); 

    ...other scripts/functions... 

    $chat.perfectScrollbar({suppressScrollX: true}); 
}); 

Вот Fiddle.