Question

所以我想创建一个网站并在点击某些内容后出现一个弹出窗口/框DIV。这个弹出式DIV包含文本/内容，我们将其命名为“Locations”，根据我的网站设计。此位置弹出式DIV具有固定的高度和宽度，因此，我创建了一个垂直滚动条，可向下滚动并读取文本。我想为这个弹出窗口添加更多内容，但不幸的是，文本被截断，滚动不会继续向下滚动。我为DIV中的边距/填充设置了一个相当大的值，使其工作的页面长度非常长，但效率非常低且编程很差。

如何使用JavaScript或CSS将div的样式设置为整个HTML文档的高度（这是动态，更改因素），这样我才能智能地正确地执行此操作？我不想手动执行此操作，因为如果我选择HTML文档的时间越长，我将不得不返回并更改CSS中的margin / padding值或对JavaScript执行某些操作。

下面是它的CSS：

/* Pop Up */
#popupAbout, #popupLocations, #popupContact, #popupBlog {
    height: 600px;
    width: 900px;
    overflow: scroll;
    background-color: rgba(0, 0, 0, 0.75);
    border: 2px solid #cecece;
    z-index: 15;
    padding: 20px;
    color: #FFF;
    -webkit-box-shadow: 0px 0px 4px #000 inset;
    -moz-box-shadow: 0px 0px 4px #000 inset;
    box-shadow: 0px 0px 4px #000 inset;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    margin-top: -50px;
    visibility: hidden;
}

#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p {
    padding-left: 10px;
    font-size: 18px;
    line-height: 20px;
}
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 {
    text-align: left;
    font-size: 30px;
    letter-spacing: 1px;
    border-bottom: 1px dotted #D3D3D3;
    padding-bottom: 2px;
    margin-bottom: 20px;
}
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose {
    right: 6px;
    top: 6px;
    position: absolute;
    display: block;
}

适当的JavaScript：

//Locations Page Pop Up
            var popupLocationsStatus = 0;

            function loadPopupLocations(){
                if(popupLocationsStatus==0){
                    $("#popupLocations").fadeIn("slow");
                    popupLocationsStatus = 1;
                }
            }

            function disablePopupLocations(){
                if(popupLocationsStatus==1){
                    $("#popupLocations").fadeOut("slow");
                    popupLocationsStatus = 0;
                }
            }

            function centerPopupLocations(){
                var windowWidth = document.documentElement.clientWidth;
                var windowHeight = document.documentElement.clientHeight;
                var popupLocationsHeight = $("#popupLocations").height();
                var popupLocationsWidth = $("#popupLocations").width();
                $("#popupLocations").css({
                    "position": "absolute",
                    "top": windowHeight/2-popupLocationsHeight/2,
                    "left": windowWidth/2-popupLocationsWidth/2
                });
            }


            $(document).ready(function(){
                $("#popupLocations").fadeOut();
                popupLocationsStatus = 0;
                $("#Locations").click(function(){
                $("#popupLocations").css({
                    "visibility": "visible" });
                    disablePopupAbout();
                    disablePopupContact();                  
                    centerPopupLocations();
                    loadPopupLocations();
                });
                $("#popupLocationsClose").click(function(){
                    disablePopupLocations();
                });
            });
            $(function()
            {
                $('#popupLocations').jScrollPane();
                $('.popupLocations').jScrollPane(
                    {
                        showArrows: true,
                        horizontalGutter: 10
                    }
                );
            });

这是我保存的屏幕截图，以便更好地了解我正在谈论的内容（查看文本被截止的弹出窗口的底部）：

My Website Screenshot

到目前为止，每个人都可以查看我的作品：www.zaheeruddinsyed.com，看看我到底在说些什么。

Answer 1

~~我相信你正在寻找overflow: auto财产。看一下这个fiddle。~~

~~如果你想在示例图像上实现滚动条，你将不得不使用css，here是关于如何将自定义样式应用于滚动条的教程。~~

顺便说一句，如果你想制作弹出窗口，你可能想看看Fancybox，在我看来，这看起来非常好，而且大部分工作已经完成了！唯一的缺点可能是你必须将它与jQuery一起使用，但它已经在今天的大多数网页上使用。

修改

当我查看页面源时，我发现问题不到一分钟。弹出div的内容不会滚动到底部，因某种原因会停止。

这个问题类似：Bottom content cutoff using overflow: auto; and jscrollpane

尝试将此代码放在JavaScript控制台中（ Ctrl + Shift +（Chrome中的 J ， K 在Firefox）中：

$("#popupLocations .jspPane").css("top","-800px")

它向下滚动到它应该的底部。我知道这还没有解决你的问题，但我认为我找到了一个解决方案（我不确定因为我不能自己测试）。但是如果你看一下其他问题，解决方案就是使用autoReinitialise:true。你可以在JavaScript控制台中运行它来立即尝试：

$('.popupLocations').jScrollPane({ showArrows: true, horizontalGutter: 10, autoReinitialise:true } );

当然，如果您希望每次刷新页面时都能正常工作，那么您必须将它放在初始化jScrollPane的文件中。

为什么你的文件中有2个$(document).ready(function()...)和2个$(function()...（相同）的定义？您应该将所有代码放在一个函数中，这将在加载DOM时调用。并且为了您的用户UX，尝试减少图像和文件，同时尽量避免使用数百万个不同的js插件。我花了差不多11秒（根据网络分析器）第一次加载，我有100Mb / s的上行链路，我无法想象有移动互联网的人。该网页发出100多个请求，其中很多是1x1px png。如果真的有必要，您可能需要考虑压缩和捆绑。这取决于您将使用的后端框架。我可以说ASP.NET MVC 4提供了非常简单的bundle manager，但我确信PHP或rails提供了类似的东西。

根据内容动态更改div的高度

1 个答案: