仅当mouseover div时才显示滚动条 [英] Showing scrollbars only when mouseover div

问题描述

鉴于 div ：

 < div style =溢出：汽车;>< / DIV> 
  

如何让滚动条仅在鼠标悬停在div上时可见？

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

解决方案

您可以使隐藏溢出，直到鼠标悬停在它上面，它自动。
这就是我所做的...注意16px填充假设一个滚动条宽度为16px，并且在滚动条出现时文本不会重新包装。

  div.myautoscroll {
 height：40ex; 
 width：40em; 
 overflow：hidden; 
 border：1px solid＃444; 
保证金：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 而不是切换它。

Given this div:

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

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

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

解决方案

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.

    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.

---

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.

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.

这篇关于仅当mouseover div时才显示滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！