如何在不更改滚动区域大小的情况下缩放滚动区域中的项目

Question

我在可滚动区域内有几个方形物品。滚动时，每个项目的规模增加10％。当项目组比滚动区域显着更高或更短时，一切正常。

当项目的高度仅略小于可滚动区域的高度时，会出现问题。这仅发生在Chrome中。我认为发生的事情是，当一个项目的大小增加10％时，包含项目的整个div也会增加到大于滚动区域的高度，此时滚动条会闪烁。

Gif of scrollbar flashing on and off

我能做些什么来阻止这种情况发生吗？

以下是CodePen示例：http://codepen.io/anon/pen/VPzoPK?editors=1100#0

相关代码：

CSS

body {
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.scrollable {
  width: 300px;
  background-color: white;
  overflow-y: auto;
  max-height: 495px;
}

.grid__col {
  display: inline-block;
  width: 25%;
  margin: 10px;
  background-color: blue;
}

.square_image {
  background-color: red;
  width: 100%;
  padding-bottom: 100%;
  border: 2px solid black;
}

.square_image:hover {
  transform: scale(1.1);
}

HTML

<div class="scrollable">
  <div class="grid">
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
  </div>
</div>

感谢您的帮助！

编辑：提到这是一个问题

Answer 1

禁用滚动：

div {
    overflow-y: hidden;
} 

强制滚动：

div {
    overflow-y: scroll;
}

修正了css：

body {
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }
      .scrollable {
        overflow-y: auto;
        width: 300px;
        background-color: white;
        max-height: 495px;
      }

      .grid__col {
        display: inline-block;
        width: 25%;
        margin: 10px;
        background-color: blue;
      }

      .square_image {
        background-color: red;
        width: 100%;
        padding-bottom: 100%;
        border: 2px solid black;
      }

      .square_image:hover {
        transform: scale(1.1);
      }

为此，请在div中添加2个方框;）

<div class="grid__col">
          <div class="square_image"></div>
        </div>

Answer 2

我认为你有两种不同的方法：

1-使用overflow-y: hidden

隐藏您的滚动

body {
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }

      .scrollable {
        width: 300px;
        background-color: white;
        overflow-y: hidden;
        max-height: 495px;
      }

      .grid__col {
        display: inline-block;
        width: 25%;
        margin: 10px;
        background-color: blue;
      }

      .square_image {
        background-color: red;
        width: 100%;
        padding-bottom: 100%;
        border: 2px solid black;
      }

      .square_image:hover {
        transform: scale(1.1);
      }

<div class="scrollable">
      <div class="grid">
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
      </div>
    </div>

2-强制滚动始终使用overflow: scroll

body {
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }

      .scrollable {
        width: 300px;
        background-color: white;
        overflow-y: scroll;
        max-height: 495px;
      }

      .grid__col {
        display: inline-block;
        width: 25%;
        margin: 10px;
        background-color: blue;
      }

      .square_image {
        background-color: red;
        width: 100%;
        padding-bottom: 100%;
        border: 2px solid black;
      }

      .square_image:hover {
        transform: scale(1.1);
      }

<div class="scrollable">
      <div class="grid">
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
        <div class="grid__col">
          <div class="square_image"></div>
        </div>
      </div>
    </div>

但是你应该保持效果和大小之间的关系，但是当你没有看到它仍然发生的不良影响时。

在这种情况下，存在与设计及其外观相关的问题。 我希望能帮到你。

Answer 3

为.scrollable div提供更多宽度，以考虑出现的滚动条：

.scrollable {
    width: 330px;
}

＆＃13;

＆＃13;

body {
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}
.scrollable {
  width: 330px; /* changed from '300px' */
  background-color: white;
  overflow-y: auto;
  max-height: 495px;
}
.grid__col {
  display: inline-block;
  width: 25%;
  margin: 10px;
  background-color: blue;
}
.square_image {
  background-color: red;
  width: 100%;
  padding-bottom: 100%;
  border: 2px solid black;
}
.square_image:hover {
  transform: scale(1.1);
}

＆＃13;

<div class="scrollable">
  <div class="grid">
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者只是强制滚动条始终可见：

.scrollable {
    overflow-y: scroll;
}

＆＃13;

＆＃13;

body {
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}
.scrollable {
  width: 300px;
  background-color: white;
  overflow-y: scroll; /* changed from 'auto' */
  max-height: 495px;
}
.grid__col {
  display: inline-block;
  width: 25%;
  margin: 10px;
  background-color: blue;
}
.square_image {
  background-color: red;
  width: 100%;
  padding-bottom: 100%;
  border: 2px solid black;
}
.square_image:hover {
  transform: scale(1.1);
}

＆＃13;

<div class="scrollable">
  <div class="grid">
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
    <div class="grid__col">
      <div class="square_image"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;