使用 javascript 动态添加或删除 overflow-Y 滚动 div 的属性

Question

我在基于 bootstrap 的页面上有两个部分 [divs]。左侧部分包含一个 bootstrap 面板，最初调整大小以占据整个页面，然后单击面板 header 上的字形，右侧部分滑动与左侧面板共享页面。右侧部分的内容也是面板，其内容为动态[table和动态行]。左侧面板被编码为始终占据 window 高度。我想要的是右侧 div 也始终占据 window 高度，并且为了溢出让右侧部分出现滚动。如果我对右侧部分的高度进行硬编码，然后给出 overflow-y: scroll，那么它就可以工作了。但我想同时提供使用 javascript 和 window 宽度的高度。请帮忙。

    <body style = "height: 100%; overflow:hidden;">
    <div id="navigationbar">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span> 
                    </button>
                    <a class="navbar-brand" href="#">TRAMM</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right" id="menu">
                    <li><a href="">Home</a></li>                            
                    <li><a href="">Page1</a></li>
                    <li><a href="">Page2</a></li>
                    <li><a href="">Page3</a></li>
                    <li><a href="">Page4</a></li>
                </ul>
                </div>
            </div>
        </nav>
    </div>

    <div id="wrapper">
        <div id="main-wrapper" class="col-sm-6">
            <div class="panel panel-info" style="margin-top: 1%">
                <div class="panel-heading" id="JnName">
                    <div class="row">
                        <div class="col-sm-8">
                            NAME : Somename
                        </div>
                        <div class="col-sm-4" style="text-align: right;">
                            <span class="toggle-button bs-tooltip" id="ShowButton" style="cursor: pointer" data-toggle="tooltip" data-placement="left" title="Click to toggle sidebar">
                                <span id="glyphbutton" class="glyphicon glyphicon-backward"></span>
                            </span>
                        </div>
                    </div>
                </div>                      
                <div class="panel-body" id="SVGPanel">
                </div>
            </div>
        </div>


        <div id="sidebar-wrapper" class="col-sm-6 sidebar">
            <div class="panel panel-info" style="margin-top: 1%;" id="JunctionParam">
                <div class="panel-heading" id="JunctionParameters">Junction Parameters</div>
                <div class="panel-body">
                    <p>
                        Please fill the content which is more than the window height here...
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

我已经试过了。但是好像没有效果

    function autoAdjust()
    {
        var $sidebarwrapperscroller;
        $sidebarwrapperscroller = document.getElementById('sidebar-wrapper');
        $sidebarwrapperscroller.style.height = $(window).height();
        alert("setheight");
        $sidebarwrapperscroller.style.overflowY = "scroll";
    }

但是没有任何javascript，如果我设置

    <div id="sidebar-wrapper" class="col-sm-6 sidebar" style="height: 700px; overflow-y:scroll;">

然后它的工作。但我希望高度动态设置为 window 高度。

Answer 1

如果我理解你的话，你需要添加 overflow-y:scroll 和 height:auto 到 sidebar-wrapper 吗？也许 jquery?

$("#sidebar-wrapper").click(function() {
    if ( $("#sidebar-wrapper").css('display') == 'visible' ){
        $("#sidebar-wrapper").css({"height":"auto", "overflow-y":"scroll"}); 
    }else{
        $("#sidebar-wrapper").css({"height":"", "overflow-y":""});
    }
});

将 sidebar-wrapper id 替换为您在 .click 函数中的字形 id

JSFiddle

使用 javascript 动态添加或删除 overflow-Y 滚动 div 的属性

Dynamically add or remove height and overflow-Y scroll property of a div using javascript

javascript

overflow

twitter-bootstrap-3

使用 javascript 动态添加或删除 overflow-Y 滚动 div 的 属性

Dynamically add or remove height and overflow-Y scroll property of a div using javascript

javascript

overflow

twitter-bootstrap-3

使用 javascript 动态添加或删除 overflow-Y 滚动 div 的属性