Question

我发现了一个代码样本，它可以满足我的需求。我需要一个典型的Bootstrap布局的左列保持固定，只允许垂直滚动，而右列包含无限数量的卡，所有卡都水平滚动。问题是，水平滚动想要占据输入屏幕，滚动到我左侧列表的顶部。

如何只在右栏中滚动？

CodePen：https://codepen.io/anon/pen/JZJOgK

<div class="container-fluid">
  <div class="row">
    <div id="left" class="col-lg-2">
      <div class="card card-block">list</div>
    </div>
    <div id="right" class="col offset-lg-2">

      <div class="row flex-row flex-nowrap">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
               <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
            </div>

    </div>
  </div>
</div>

Answer 1

隐藏身体上的溢出物，并在右栏上启用它（overflow-x:auto）......

body {
  overflow-x:hidden;
}

#right {
  background-color: white;
  padding-left:25px;
  overflow-x:auto;
}

https://codepen.io/anon/pen/yEXpPy

仅右列中的水平滚动

1 个答案: