Question

我的y滚动条有问题。

我的问题是，当我将鼠标悬停在DIV上时，会显示一个y滚动条，这将使该DIV中的所有内容都缩小一点。我怎么能避免这个？

html

<div class="ht ov-h darker-bg p-r-3">

    <h1 class="widget-title p-y-2 p-x-1"> Top Artists </h1>

    <ul class="list-artists p-l-0">
        {{#each artists as |artist|}}
        <li>
            <a href="#" class="link-nostyle">
                <div class="row p-y-1">

                    <div class="col-xs-4">
                        <img src="{{artist.image}}" class="img-fluid img-circle">
                    </div>

                    <div class="col-off-xs-1 col-xs-7 vertical-text">

                        <span> {{artist.name}} </span>

                    </div>
                </div>
            </a>
        </li>
        {{/each}}

    </ul>
</div>

CSS

.widget-title {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: $spacer-y;
}

.widget {
  background: #E0EAEC;
}

.ov {
  overflow: auto;
}

.ov-h {
  overflow: hidden;

  &:hover, &:focus {
    overflow: auto;
  }
}

.ht {
  height: 100%;
}

Answer 1

你在这里有一些选择。

1-您可以使用overflow-y:scroll

将滚动条设置为始终可见

2-您可以使用jQuery滚动条，例如“Perfect scrollbar”

3-您可以使用overflow-y:hidden中的&:hover, &:focus在悬停时始终隐藏溢出。

右滚动条会导致文本在显示时缩小

1 个答案: