Css 仅当鼠标悬停div时显示滚动条

鉴于此

div

：

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

如何使滚动条仅在鼠标位于div上方时可见

---

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

尝试使用

：hover

选择器选择div

#div { overflow: hidden; }

#div:hover { overflow:visible; }

---

可以将溢出隐藏，直到鼠标悬停在其上，然后使其自动。 这就是我所做的。。。请注意，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

空间可能需要根据您的情况进行调整。填充的目的是防止文本在滚动条出现和消失时重新流动

---

有些系统，比如MacOSX的较新版本（至少10.8.X），在开始滚动之前不会显示滚动条，这可能会使整个技术失效。如果滚动条没有显示，您可能没有理由将其隐藏到悬停状态，或者您可能希望将溢出设置为

auto

，或者甚至

scroll

，而不是切换它。

我也遇到过同样的问题，并尝试了一系列上述解决方案，但没有结果。经过大量的研究，我得出了这个解决方案。只需将这些行粘贴到css文件中

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;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

---

发生在我身上的是Mac OSX lion和up（我运行的是约塞米蒂）自动隐藏滚动条，使其看起来更加光滑。上面的代码覆盖默认值并返回滚动条。。。结合css将溢出更改为滚动悬停，这将为新mac OSX上的用户实现所需的结果。这是一把小提琴（不是我自己的，而是我找到答案的那把）

我想出了这个解决方案。基本上，负边距会切断垂直滚动条

.hidden-scrollbar {
    padding-right: 50px;
    margin-right: -25px;        
    overflow-y: auto;        
}

.hidden-scrollbar.hover-scrollbar:hover {
    padding-right: 25px;
    margin-right: 0;
    overflow-y: auto;
}

较少的混入

.hidden-scrollbar(@padding) {
    padding-right: 2 * @padding;
    margin-right: -@padding;
    overflow-y: auto;        

    &.hover-scrollbar:hover {
        padding-right: @padding;
        margin-right: 0;
    }
}

注意：@填充应至少为滚动条宽度（例如25px）

---

基本上，将其添加到LESS/CSS中，并将类添加到需要它的滚动条切断的元素中。

更改溢出的答案有一系列问题，如内部块宽度不一致、触发回流、需要额外代码来处理填充和不禁用键盘（以及，可能的其他）不悬停时的交互

有一种更简单的方法可以产生不会触发回流的相同效果：使用

可见性

属性和嵌套块：

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

这是一支钢笔，上面有一个工作示例：

这种方法的另一个特点是，

可见性

是可设置动画的，因此我们可以向其添加一个过渡（参见上面画笔中的第二个示例）。对于用户体验来说，添加一个转换会更好：滚动条不会在移动到另一个元素时立即显示，当鼠标光标指向滚动条时，滚动条也不会立即隐藏，因此更难错过滚动条

如果您可以使用css添加正常视图中隐藏的溢出-y，那么您可以添加：hover事件add overflow-y:auto

---

如果可以使用Jquery，请使用悬停事件

---

片段：

jQuery（“.main_panel”）。悬停(
函数（）{
jQuery（this）.addClass（“show_cont”）；
},
函数（）{
jQuery（this）.removeClass（“show_cont”）；
}
);
。主面板{
宽度：300px；
高度：200px；
显示：块；
位置：相对位置；
保证金：0自动；
溢出：隐藏；
}
limt先生{
填充：0；
显示：内联块；
宽度：90%；
保证金：0；
}
李立明{
显示：内联块；
宽度：100%；
字号：18px；
线高：28px；
}
.show_cont{
溢出y：自动；
}


在布朗迪特酒馆的馆长
在布朗迪特酒馆的馆长
在布朗迪特酒馆的馆长
在布朗迪特酒馆的馆长
在布朗迪特酒馆的馆长

与其移动边距/填充或可见性，不如将颜色设置为透明，并将其恢复到悬停状态

.mydiv::-webkit-scrollbar-track{
    background-color: transparent;
}
.mydiv::-webkit-scrollbar-thumb{
    background-color: transparent;
}
.mydiv:hover::-webkit-scrollbar-thumb{
    background-color: #a0a0a0;
}
.mydiv:hover::-webkit-scrollbar-track{
    background-color: #e1e1e1;
}

谢谢你的解决方案。我的一份工作需要它。但我有个小问题。当没有可见滚动条时使用的16px右键填充，当滚动条可见时悬停时变为0。出于某种原因，我不想使用16px的填充，所以我将其删除。当它第一次工作正常时，将鼠标悬停在div上会显示滚动条，将鼠标悬停在out上会删除滚动条，但仍有16px（我假设）的间隔。我不知道差距从哪里来。请在这里找到小提琴我做这段代码是为了显示滚动条，不知道为什么要把滚动条而不是自动，但这就是它的工作原理，但是不知道为什么当我将鼠标悬停在区域上时，它只在我滚动时显示滚动条，而不是当我将鼠标悬停在div区域
上时显示滚动条{max height:200px；overflow-y:hidden；}#myautoscroll:hover{overflow-y:scroll；}
这种方法对我来说效果很好，它没有弄乱overflow属性（以及您在那里提到的所有问题），这很好。但是它上面的动画不起作用。看起来可见性无法动画（）.Opacity可以设置动画，但是当我在这个设置中使用它时，.scrollbox内容中的内容也会受到不透明度的影响（内容会随着滚动条淡出）。你有没有让动画部分使用这种方法？@rebecca Visibility是开还是关。我相信kizu的意思是，你可以使用与转换相关的延迟属性。其中一个示例在显示或隐藏滚动条之前有200毫秒的延迟。这是一个绝妙的解决方案，kizu。这很好地解决了问题。给他们一个奖牌，然后是另一枚