화면 크기가 조정될 때까지 스크롤 막대가로드되거나 크기가 조정되지 않습니다.

Question

클라이언트 용 웹 사이트에서 작업 중이므로 도움이 필요합니다. 어떤 이유로 각 "페이지"의 스크롤 막대는 창이 크기가 조정될 때까지로드되거나 높이가 변경되지 않습니다. 일반 스크롤바를 대체하는 jQuery 스크롤 막대가 있습니다. 그러나이 스크롤 막대를 비활성화하면 정상 스크롤 막대가 동일한 작업을 수행합니다. 콘텐츠는 스크롤 div의 하위 div에 저장되지만 콘텐츠가 변경되면 콘텐츠 div의 높이가 변경되지 않습니다. 코드를 $ (window) .resize (아래에 표시)에서 자체 함수로 변환하면 작동하지 않습니다.

http://brianandsacha.tumblr.com/

그것은 최악의 일이 아니지만, 아주 성가신입니다.

EDIT : Max Dunn이 제안한 수정 사항과 함께 전체 JS 코드를 추가했습니다. 그것은 여전히 ​​똑같은 일을합니다. 첫 번째 숨겨진 사업부를 표시 한 후

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

그런 다음이 함수를 호출 :

 //--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> 

Answer 1

나는 다른 사람들이 비슷한 문제를 겪는 것을 도울 수 있기 때문에 나는 다른 대답을 남겨두고있다. 그러나이 특정 자바 스크립트 코드를 살펴본 후 개선 할 부분이 많아서 코드를 다시 작성했습니다.

이 도왔해야처럼 보인다

<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> 

Answer 2

첫째, 크기 조정 코드를 기능을합니다.

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

오히려 또 다른 $ (문서) .ready보다 여기를 호출하는 이유는 .ready이 불 것이다 $ (문서)를 주문 모르는 것을, 그리고 전에 발사되는 것입니다 당신은 모든 div를 보여줍니다.

또한 모든 click() 함수의 끝에 resizeBubble() 호출을 추가하고 $ (window) .resize도 추가해야합니다.