Question

我对此很新，所以如果这是一个显而易见的事我很抱歉。我有两个独立滚动的列，如下例所示（假设它们在有足够的内容时可以工作）：

这个fiddle可能会比下面的代码片段更容易可视化

.xo-scroll-col {
    top: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
    height: calc(100% - 120px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-compat/3.0.0-alpha1/jquery.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4 xo-scroll-col">
            one
        </div>
        <div class="col-md-8 xo-scroll-col">
            two
        </div>
    </div>
</div>

一旦你足够调整窗口大小，“one”和“two”将叠加在一起。我想让“xo-scroll-col”css处于活动状态，直到它们堆叠，然后禁用它。

基本上，这里的想法是让它们独立滚动，直到它们成为堆栈，因为此时不再需要它。关于如何做到这一点的想法？

Answer 1

您可以使用jQuery $(window).resize并在其中听取$(window).width()，然后使用.addClass和.removeClass()或将您的.xo-scroll-col课程置于@media (max-width: $media-sm){}。

之内

阅读有关CSS中媒体查询的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

我为你疯了fiddle。请检查这是否是您需要的。主要是两个变化。

1）首先，身高单位从%变为vh
height: calc(100vh - 120px);

2）其次，为Bootstrap media-query size

添加了md

@media (min-width:992px){
  .xo-scroll-col {
    top: 0;
    bottom: 0;
    overflow: auto;
    height: calc(100vh - 120px);
  }
}

活动的CSS属性，直到窗口调整大小？

2 个答案: