仅在mouseover div时显示滚动条

Question

鉴于此div:

<div style="overflow:auto;"></div>

只有当鼠标悬停在div上时,如何才能使滚动条可见？

我不希望滚动条总是出现.Facebook的右上角就是一个例子.

Answer 1

你可以隐藏溢出,直到鼠标悬停它,然后使其自动.这就是我所做的...请注意16px填充假定滚动条宽度为16px,并且在滚动条出现时文本不会重新换行.

    div.myautoscroll {
        height: 40ex;
        width: 40em;
        overflow: hidden;
        border: 1px solid #444;
        margin: 3em;
    }
    div.myautoscroll:hover {
        overflow: auto;
    }
    div.myautoscroll p {
        padding-right: 16px;
    }
    div.myautoscroll:hover p {
        padding-right: 0px;
    }

在这个小提琴中看到它的实际效果- 你想要扩大右侧"结果"窗口以查看整个框,或者减小css中的宽度.

编辑2014-10-23

现在系统和浏览器显示滚动条的方式有很多变化,因此我的16px空间可能需要根据您的情况进行调整.填充的目的是防止文本在滚动条出现和消失时重新流动.

某些系统,例如较新版本的Mac OS X(至少10.8.x),在您开始滚动之前不会显示滚动条,这可能会导致整个技术失效.如果滚动条没有显示,您可能没有理由在悬停之前隐藏它,或者您可能希望将溢出保留为auto甚至scroll而不是切换它.

Answer 2

更改溢出的答案有很多问题,例如内部块的宽度不一致,重排的触发,需要额外的代码来处理填充,并且在不悬停时不需要禁用键盘(以及可能的其他)交互.

有一种更简单的方法可以获得相同的效果,不会触发重排:使用visibility属性和嵌套块:

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

这是一支带有工作示例的笔:http://codepen.io/kizu/pen/OyzGXY

这种方法的另一个特点visibility是可动画,所以我们可以添加一个过渡(参见上面笔中的第二个例子).对于UX来说,添加转换效果会更好:滚动条在移动到另一个元素时不会立即出现,并且在使用鼠标光标对其进行定位时更难以错过滚动条,因为它不会立即隐藏好.

Answer 3

尝试使用:hover选择器选择 div

#div { overflow: hidden; }

#div:hover { overflow:visible; }