Question

我使用Angular.js和Bootstrap 2.3.2渲染屏幕左侧的一系列缩略图，右侧我有更大的版本，此刻我能够只获得一个滚动条，我想让它们与自己的垂直滚动条无关，而不使用框架而只使用css。

HTML：

<div class="row">
    <div class="span3">
        <div class="thumbs-list">
            <div infinite-scroll='nextThumb()' infinite-scroll-disabled='busyThumb' infinite-scroll-    distance='1'>
                <div class='thumb' ng-repeat='thumb in arrayOfThumbs'>
                    <div class="image-thumbnail">
                        <ul class="scrubber" style="width: 115px; height:auto; padding: 0px;">   
                            <li style="display: block;" ng-click="viewImage(doc)">
                                <a href="#">
                                    <img ng-src="{{thumb.code}}"  alt="" title="Thumb 1"></img>
                                </a>
                            </li>
                        </ul>
                    </div> <!-- END image-thumbnail -->
                </div> <!-- END class='thumb' -->
            </div> <!-- END infinite-scroll -->
        </div> <!-- END thumb-list -->
    </div><!-- END span3 -->

    <div class="span12">
        <div class="images-list">
            <div infinite-scroll='nextImage()' infinite-scroll-disabled='busyImage' infinite-scroll-     distance='1'>
                <div class='image-page' ng-repeat='image in arrayOfImages'>
                    <ul class="scrubber-page" >      
                        <li style="display: blockImage;" ng-click="zoom(doc)">
                            <a href="#">
                                <img ng-src="{{image.code}}"  alt="" title="Page 1"></img>
                            </a>      
                        </li>
                    </ul>
                </div>  <!-- END class='image-page' -->
            </div>  <!-- END infinite-scroll -->
        </div>  <!-- END images-list -->
    </div>  <!-- END span12 -->
</div>  <!-- END row -->

CSS：

.thumbs-list {
    margin-top: 95px;
    position: absolute;
    display: block;
    padding: 8px;
    height: auto;
    overflow:auto;
}

.image-thumbnail {
    margin-top:15px;
    height: auto;
    overflow: auto;
    text-align: center;
    padding: 1em 1em;
    border: 1px solid #aaa;
    background: #fff;
    color: #222;
    border-radius: 0px;
    -moz-box-shadow: 3px 3px 10px 3px #ccc;
    -webkit-box-shadow: 3px 3px 10px 3px #ccc;
    box-shadow: 3px 3px 10px 3px #ccc;
}

.images-list {
    margin-top: 95px;
    position: absolute;
    display: block;
    padding: 8px;
    height: auto;
    overflow:auto;
}

.image-page {
    margin-top:15px;
    height: auto;
    overflow: auto;
    text-align: center;
    padding: 1em 1em;
    border: 1px solid #aaa;
    background: #fff;
    color: #222;
    border-radius: 0px;
    -moz-box-shadow: 3px 3px 10px 3px #ccc;
    -webkit-box-shadow: 3px 3px 10px 3px #ccc;
    box-shadow: 3px 3px 10px 3px #ccc;
}

.scrubber-page {
    height:auto;
    width:auto;
    overflow:auto;
}

Answer 1

您是否尝试设置元素的高度/宽度并添加：

overflow: scroll;

然后，您将为每个元素提供一个滚动条，其内容大于其大小。

用自己的垂直滚动条分隔屏幕的2个区域

1 个答案: