滾動條不會加載或調整大小，直到屏幕調整大小

我正在爲客戶端的網站工作，需要一些幫助。出於某種原因，每個「頁面」上的滾動條在調整窗口大小之前不會加載或更改高度。我有一個jQuery滾動條替換正常的滾動條，但這不是，因爲當我禁用這些滾動條時，正常的滾動條做同樣的事情。內容存儲在滾動div的子div內，但內容div的高度在內容改變時不會改變。將代碼從$（window）.resize（如下所示）轉換爲它自己的函數也不起作用。滾動條不會加載或調整大小，直到屏幕調整大小

http://brianandsacha.tumblr.com/

這不是最糟糕的事情，但很煩人。

編輯：我添加了整個JS代碼，由Max Dunn建議的編輯。它仍然做同樣的事情。

 //--details 
     $(document).ready(function() { 
      $("#info").show(); 
     }); 
     $(document).ready(function() { 
      $('#elephant').click(function() { 
       if ($('#info').css('display') == "none") 
        $('#info').fadeIn('slow'), 
        $('#stay').hide(); 
        $('#todo').hide(); 
        $('#nav').hide(); 
        $('#gifts').hide(); 
        $('#contact').hide(); 
        $('#photos').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 
      }); 
     }); 
     //--stay 
     $(document).ready(function() { 
      $("#stay").hide(); 
     }); 
     $(document).ready(function() { 
      $('#gator').click(function() { 
       if ($('#stay').css('display') == "none") 
        $('#stay').fadeIn('slow'), 
        $('#info').hide(); 
        $('#todo').hide(); 
        $('#nav').hide(); 
        $('#gifts').hide(); 
        $('#contact').hide(); 
        $('#photos').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 

      }); 
     }); 
     //--todo 
     $(document).ready(function() { 
      $("#todo").hide(); 
     }); 
     $(document).ready(function() { 
      $('#man').click(function() { 
       if ($('#todo').css('display') == "none") 
        $('#todo').fadeIn('slow'), 
        $('#info').hide(); 
        $('#stay').hide(); 
        $('#nav').hide(); 
        $('#gifts').hide(); 
        $('#contact').hide(); 
        $('#photos').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 
      }); 
     }); 
     //--nav 
     $(document).ready(function() { 
      $("#nav").hide(); 
     }); 
     $(document).ready(function() { 
      $('#woman').click(function() { 
       if ($('#nav').css('display') == "none") 
        $('#nav').fadeIn('slow'), 
        $('#info').hide(); 
        $('#stay').hide(); 
        $('#todo').hide(); 
        $('#gifts').hide(); 
        $('#contact').hide(); 
        $('#photos').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 
      }); 
     }); 
     //--gifts 
     $(document).ready(function() { 
      $("#gifts").hide(); 
     }); 
     $(document).ready(function() { 
      $('#bird').click(function() { 
       if ($('#gifts').css('display') == "none") 
        $('#gifts').fadeIn('slow'), 
        $('#info').hide(); 
        $('#stay').hide(); 
        $('#todo').hide(); 
        $('#nav').hide(); 
        $('#contact').hide(); 
        $('#photos').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 
      }); 
     }); 
     //--contact 
     $(document).ready(function() { 
      $("#contact").hide(); 
     }); 
     $(document).ready(function() { 
      $('#dog').click(function() { 
       if ($('#contact').css('display') == "none") 
        $('#contact').fadeIn('slow'), 
        $('#info').hide(); 
        $('#stay').hide(); 
        $('#todo').hide(); 
        $('#nav').hide(); 
        $('#gifts').hide(); 
        $('#photos').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 
      }); 
     }); 

     //--photos 
     $(document).ready(function() { 
      $("#photos").hide(); 
     }); 
     $(document).ready(function() { 
      $('#cat').click(function() { 
       if ($('#photos').css('display') == "none") 
        $('#photos').fadeIn('slow'), 
        $('#info').hide(); 
        $('#stay').hide(); 
        $('#todo').hide(); 
        $('#nav').hide(); 
        $('#gifts').hide(); 
        $('#contact').hide(); 
        $('#welcome').hide(); 
        $("#bubblecontent").show(); 
        resizeBubble(); 
      }); 
     }); 
     //welcome 
     $(document).ready(function() { 
      $("#welcome").show(); 
      $("#bubblecontent").hide(); 
      $('#header').click(function() { 
       if ($('#welcome').css('display') == "none") 
        $('#welcome').fadeIn('slow'), 
        $('#stay').hide(); 
        $('#todo').hide(); 
        $('#nav').hide(); 
        $('#gifts').hide(); 
        $('#contact').hide(); 
        $('#photos').hide(); 
        $("#bubblecontent").hide(); 
        resizeBubble(); 
      }); 
     }); 
     //bubbleheight 
     function resizeBubble() { 
      var divHeight = $(document).height() - 300; 
      $('#bubble').css({height: divHeight}); 
     }; 
     $(window).resize(
     function() { 
      resizeBubble(); 
     }); 

    body { 
     overflow-y: hidden; 
     overflow-x: hidden; 
     font-family: "museo-slab", georgia, serif; 
     font-weight: 100; 
     height: 100%; 
    } 
    #container { 
     margin-left: auto; 
     margin-right: auto; 
    } 
    #bubble { 
     background-color: #f5fec3; 
     height: 100%; 
     width: 900px; 
     margin-left: auto; 
     margin-right: auto; 
     border-radius: 15px; 
     -moz-border-radius: 15px; 
     overflow-y: auto; 
    } 
    #bubblecontent { 
     width: 860px; 
     margin-left: auto; 
     margin-right: auto; 
     overflow-y: auto; 
    } 

<div id="container"> 
    <div id="bubble"> 
    <div id="bubblecontent"> 
     <div id="contentdiv1"> 
     blah 
     </div> 
     <div id="contentdiv2"> 
     blah 
     </div> 
    </div> 
    </div> 
</div>

來源

2012-10-20 Wilson Biggs

我要離開我的其他答案，因爲它可能會幫助其他人遇到類似的問題。然而，在查看這個特定的JavaScript代碼後，有很多需要改進的地方，所以我重寫了代碼。重要的改變是當內容改變時使用mCustomScrollbar（「更新」）功能：

<script type="text/javascript"> 
    //loading 
    $(window).load(function() { 
    $('#loading').fadeOut('fast'); 
    }); 

    $(document).ready(function() { 
    //elephant 
    loadImage1 = new Image(); 
    loadImage1.src = "http://static.tumblr.com/spps9en/JN3m8jui6/elephanthover.png"; 
    staticImage1 = new Image(); 
    staticImage1.src = "http://static.tumblr.com/spps9en/j7Fm8jufs/elephant.png"; 
    //gator 
    loadImage2 = new Image(); 
    loadImage2.src = "http://static.tumblr.com/spps9en/DoNm8jujc/alligatorhover.png"; 
    staticImage2 = new Image(); 
    staticImage2.src = "http://static.tumblr.com/spps9en/q9Em8jujy/alligator.png"; 
    //man 
    loadImage3 = new Image(); 
    loadImage3.src = "http://static.tumblr.com/spps9en/AKZm8jvs5/manhover.png"; 
    staticImage3 = new Image(); 
    staticImage3.src = "http://static.tumblr.com/spps9en/xZam8jvbc/man.png"; 
    //woman 
    loadImage4 = new Image(); 
    loadImage4.src = "http://static.tumblr.com/spps9en/AH6m8jvvq/womanhover.png"; 
    staticImage4 = new Image(); 
    staticImage4.src = "http://static.tumblr.com/spps9en/seym8jvup/woman.png"; 
    //bird 
    loadImage5 = new Image(); 
    loadImage5.src = "http://static.tumblr.com/spps9en/HY8m8phuj/birdhover.png"; 
    staticImage5 = new Image(); 
    staticImage5.src = "http://static.tumblr.com/spps9en/0jkm8jvz1/bird.png"; 
    //dog 
    loadImage6 = new Image(); 
    loadImage6.src = "http://static.tumblr.com/spps9en/sxcm8gfjf/doghover.png"; 
    staticImage6 = new Image(); 
    staticImage6.src = "http://static.tumblr.com/spps9en/2qKm8jw17/dog.png"; 
    //cat 
    loadImage7 = new Image(); 
    loadImage7.src = "http://static.tumblr.com/spps9en/ex8mc60c7/cathover.png"; 
    staticImage7 = new Image(); 
    staticImage7.src = "http://static.tumblr.com/spps9en/MKomc6065/cat.png"; 

    function resizeBubble() { 
     var divHeight = $(document).height() - 300; 
     $('#bubble').css({height: divHeight}); 
    }; 

    $(window).resize(function() { 
     resizeBubble(); 
    }); 

    function updateScroll() { 
     $("#bubble").mCustomScrollbar("update"); 
    } 

    function hideAll() { 
     $("#welcome").hide(); 
     $("#info").hide(); 
     $("#stay").hide(); 
     $("#todo").hide(); 
     $("#nav").hide(); 
     $("#gifts").hide(); 
     $("#contact").hide(); 
     $("#photos").hide(); 
    } 

    function switchSection(sectionId) { 
     if ($(sectionId).css('display') == "none") { 
     hideAll(); 
     $(sectionId).fadeIn('slow'); 
     updateScroll(); 
     } 
    } 

    $('#elephant').click(function() { 
     switchSection('#info') 
    }); 
    $('#gator').click(function() { 
     switchSection('#stay') 
    }); 
    $('#man').click(function() { 
     switchSection('#todo') 
    }); 
    $('#woman').click(function() { 
     switchSection('#nav') 
    }); 
    $('#bird').click(function() { 
     switchSection('#gifts') 
    }); 
    $('#dog').click(function() { 
     switchSection('#contact') 
    }); 
    $('#cat').click(function() { 
     switchSection('#photos') 
    }); 
    $('#header').click(function() { 
     switchSection('#welcome') 
    }); 

    // Initial state 
    hideAll(); 
    resizeBubble(); 
    $("#bubble").mCustomScrollbar({set_width:false}); 
    switchSection('#welcome'); 
    }); 
</script>

來源

2012-10-21 00:17:27

謝謝！這完全解決了這個問題 - 我沒有意識到mCustomScrollbar甚至做到了這一點。我對JavaScript和jQuery也很陌生，所以感謝您重新組織代碼！ –

首先，調整大小代碼的函數：你看第一隱藏的div後

function resizeBubble() { 
    var divHeight = $(document).height() - 300; 
    $('#bubble').css({height: divHeight}); 
};

然後調用這個函數。

$(document).ready(function() { 
    $("#info").show; 
    resizeBubble(); 
};

之所以在這裏調用它，而不是另一個$（文件）。就緒的是，你不知道什麼樣的順序$（文件）。就緒將火在，而且很可能是前發射你顯示任何div。

您還需要將resizeBubble（）調用添加到所有click（）函數的末尾以及$（window）.resize。

來源

2012-10-20 02:55:14

這似乎應該有所幫助，但它實際上什麼都沒做。它只是做和以前一樣的事情。奇怪，是吧？：/ –

你可以請你的JavaScript代碼添加到問題中。在那裏我可能錯過了一些微妙的東西。 –

我加了整個javascript代碼。 –

滾動條不會加載或調整大小，直到屏幕調整大小

回答

相關問題