Question

我正在为客户工作的网站，需要一些帮助。出于某种原因，每个“页面”上的滚动条不会加载或更改高度，直到调整窗口大小。我有一个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>

Answer 1

我要离开我的另一个答案，因为它可能会帮助遇到类似问题的其他人。但是在查看了这个特定的javascript代码之后，还有很多需要改进的地方，所以我重写了代码。重要的变化是在内容更改时使用mCustomScrollbar（“update”）函数：

<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

首先，使调整大小代码成为一个函数：

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

然后在显示第一个隐藏的div后调用此函数。

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

在这里调用它而不是另一个$（文档）.ready的原因是你不知道$（document）.ready将触发的命令，并且它很可能在你显示之前触发任何div。

您还需要将resizeBubble（）调用添加到所有click（）函数的末尾以及$（window）.resize。

在调整屏幕大小之前，滚动条不会加载或调整大小

2 个答案: