仅在mouseover div时显示滚动条

Given this div:

鉴于这个div:

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

How can I make the scrollbars visible only when the mouse is over the div?

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

I don't want the scrollbars to always appear. Facebook's right-top corner is an example of this.

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

7 个解决方案

#1

You can make overflow hidden until the mouse is over it, then make it auto. This is what I did ... note the 16px padding assumes a scrollbar is 16px wide, and is there so the text doesn't re-wrap when the scrollbar appears.

你可以隐藏溢出,直到鼠标悬停它,然后使其自动。这就是我所做的...注意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;
    }

See it in action at this fiddle - you'll want to widen the right side "result" window to see the whole box, or reduce the width in the css.

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

Edit 2014-10-23

There is now more variation in how systems and browsers display scrollbars, so my 16px space may need to be adjusted for your case. The intent of that padding is to prevent the text from being re-flowed as the scrollbar appears and disappears.

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

Some systems, such as newer versions of Mac OS X (10.8.x at least), don't show scrollbars until you start scrolling which could throw this whole technique off. If the scrollbar doesn't show you may have no reason to hide it until hover, or you may want to leave overflow as auto or even scroll rather than toggling it.

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

#2

The answer with changing overflow have a bunch of issues, like inconsistent width of the inner block, triggering of reflow, the need to have extra code for deal with paddings and without disabling keyboard (and, possibly, other) interactions when not hovered.

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

There is an easier way to have the same effect that would not trigger reflow ever: using visibility property and nested blocks:

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

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

Here is a pen with a working example: http://codepen.io/kizu/pen/OyzGXY

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

Another feature of this method is that visibility is animatable, so we can add a transition to it (see the second example in the pen above). Adding a transition would be better for UX: the scrollbar won't appear immediately when hovered just while moving along to another element, and it would be harder to miss the scrollbar when targeting it with mouse cursor, as it won't hide immediately as well.

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

#3

Try selecting the div with :hover selector

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

#div { overflow: hidden; }

#div:hover { overflow:visible; }

#4

I have had the same problem and tried a bunch of the above solutions without result. After lots of research I came to this solution. Just paste these lines into your css file.

我遇到了同样的问题并尝试了一堆上述解决方案而没有结果。经过大量的研究,我找到了这个解决方案。只需将这些行粘贴到您的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);
}

What was happening to me was that Mac OSX lion and up (I am running Yosemite) auto hide scrollbars to seem more sleek. The code above overwrites the default and brings back the scrollbar ... combined with the css for changing the overflow to scroll on hover this will achieved the desired result for users on the newer mac OSXs. Here is a fiddle (not my own but the one where I found this answer). http://jsfiddle.net/simurai/UsvLN/

发生在我身上的是Mac OSX狮子和我(我正在运行Yosemite)自动隐藏滚动条看起来更加圆滑。上面的代码覆盖默认值并带回滚动条...结合css更改溢出以在悬停时滚动,这将为较新的mac OSX上的用户实现所需的结果。这是一个小提琴(不是我自己的,但我发现这个答案的那个)。 http://jsfiddle.net/simurai/UsvLN/

#5

I came up with this solution. Basically the negative margin cuts off the vertical scrollbar.

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

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

LESS mixin

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

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

NOTE: @padding should be at least the scrollbar width (e.g. 25px)

注意:@padding应至少为滚动条宽度(例如25px)

Basically add this to your LESS/CSS and add the class to the element that needs it's scrollbar cut off.

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

#6

If you can use css to add overflow-y hidden in the normal view.Then you can add the :hover event add overflow-y:auto.

如果你可以使用css在普通视图中添加overflow-y隐藏。然后你可以添加:hover事件add overflow-y:auto。

See This Link

请参阅此链接

If you can use Jquery use the hover event

如果你可以使用Jquery使用悬停事件

See This Fiddle

看这个小提琴

Snippet:

jQuery(".main_panel").hover(
  function() {
    jQuery(this).addClass("show_cont");
  },
  function() {
    jQuery(this).removeClass("show_cont");
  }
);

.main_panel {
  width: 300px;
  height: 200px;
  display: block;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.limt {
  padding: 0;
  display: inline-block;
  width: 90%;
  margin: 0;
}

ul.limt li {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  line-height: 28px;
}

.show_cont {
  overflow-y: auto;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="main_panel">
  <ul class="limt">
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
    <li>Curabitur aliquet quam id dui posuere blandit.</li>
  </ul>
</div>

#7

-1

#dv a{
    background:url(http://dhavalvachhani.16mb.com/images/Dhaval-Vachhani.png) 0 0 no-repeat;
    background-size: 100%;
    display:block;
      text-align: center;
      color: #fff;
      padding-top: 20px;;
    width:500px;
    height:300px;

    -webkit-transition: background-position 5s ease-in-out;
    -moz-transition: background-position 5s ease-in-out;
    -ms-transition: background-position 5s ease-in-out;
    -o-transition: background-position 5s ease-in-out;
    transition: background-position 5s ease-in-out;
}

#dv a:hover {
    background-position:0px 100%;

}

<div id="dv">
<a href="http://dhavalvachhani.16mb.com/" target="_blank"></a>

#1