0

I am trying to apply a jquery scrollbar to a div that is populated with content from another local jquery call. My problem is that IE does not seem to wait for the content in the div to load, before calling the script for the scrollbar...hence, the scrollbar does not work correctly.

  • All other browsers work fine, IE (ver. 8, 9 ) is the only one not working.
  • when the div contains static html code, IE works fine
  • the call to the scroll function is inside a window.load

The strange thing: IF i stick an alert() call before calling the scroll code, it will work.

I have tried adding a setTimeout() function, but that did not work.

The code looks like this

<head>
  <script>
      $(document).ready(function() {
          // ajax call to populate scrollable div with html content
       });
  </script>
</head>
<body>

    <div class="scrollableDiv">

       // content populated by script call above

    </div>

    <...... lots more html here .....>
    <!-- very bottom of page -->
    <script>
       $(window).load(function(){
          // alert ("IF I ADD THIS ALERT, EVERYTHING WORKS FINE IN IE");
         $('.scrollableDiv').ClassyScroll();

       });
    </script>
  </body>

Any ideas???

4

2 回答 2

1

$(document).ready(function() {

当文档准备好时，你的 div 的内容就会被填充。

$(window).load(function(){

ClassyScroll每当您的页面完全加载时，都会调用您的函数。

我们需要知道你在做什么来填充你的 div，但它可能是异步的，并且不会阻止加载事件的触发。

无论如何，将它们两者用于相同的功能通常是一个坏主意。我的建议是ClassyScroll只要您知道您的 div 已填充（如果同步，则在回调之后，如果异步则在回调之后）简单地调用。

就像是 ：

$(document).ready(function() {
    // call function to populate scrollable div with html content
    populateDivWhatever();
    // call your classyscroll function
    $('.scrollableDiv').ClassyScroll();
});
于 2013-10-22T15:36:48.733 回答
0

Jquery Ajax 将提供帮助

看来您正在通过 ajax 调用加载 scrollableDiv 的内容？如果是这样，那么当 window.load 发生时，该数据可能不会存在。window.load 不等待异步调用完成。

解决方案是将 $('.scrollableDiv').ClassyScroll(); 在您的 $(document).ready(function() {}); 末尾 或将其放入 ajax 调用的成功回调中。

我一直在 jquery 中做 ajax 事情，它看起来像这样：

$.ajax({
    beforeSend: function(req, settings) {
        // display a please wait spinner
    },
    complete: function(req, status) {
        // hide the please wait spinner
        // also a possible place to put code you want run after the DOM has changed
    },
    async: true,  // could omit as this is the default
    data: {param1:foo, param2:bar},
    dataType: "html",
    error: function(req, status, err) {
        // report the bad error
    },
    success: function(data, status, req) {
              // do the fun stuff here
    },
    type: "POST",
    url: someURL
});
于 2013-10-22T15:35:37.057 回答