$（window）.load（function（）并非始终有效

Question

我正在尝试在网站上的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>放在标题上，然后将我上面描述的代码与window.load放在<script></script> 。 我以为这与准备好的另一个文档有冲突，所以我在线搜索了解决方案和其他加载它的方法，发现没有冲突很麻烦，并尝试像这样实现：

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

但仍然没有结果，唯一要做的就是阻止网站的所有jquery正常工作。 谁能帮我这个？ 提前致谢

Answer 1

我已经测试过， document.ready应该可以正常工作。

CSS

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

编辑：

由于您正在将其与其他脚本结合使用，因此可以尝试在最顶部将选择器声明为变量。

JQuery的

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

    ...other scripts/functions... 

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

这是小提琴 。

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

非常感谢您的帮助，我在这里找到了此解决方法： [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);