顯示滾動條，當鼠標懸停格

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

在this fiddle看到它在行動 - 你想擴展右側的「結果」窗口中看到整個盒子，或減少在CSS的寬度。

---

編輯2014年10月23日

有一個在操作系統和瀏覽器如何顯示滾動條，現在更多的變化，所以我16px空間可能需要調整您的案件。該填充的目的是防止文本在滾動條出現和消失時被重新流動。

某些系統（例如較新版本的Mac OS X（至少10.8.x））不會顯示滾動條，直到您開始滾動這可能會導致整個技術關閉。如果滾動條不顯示，您可能沒有理由隱藏它直到懸停，或者您可能想要保留溢出爲auto甚至scroll而不是切換它。

Answer 2

嘗試用:hover選擇器選擇一個DIV

#div { overflow: hidden; } 

#div:hover { overflow:visible; } 

Answer 3

我有同樣的問題，並嘗試了一堆上述解決方案沒有結果。經過大量研究，我找到了這個解決方案。只需將這些行粘貼到您的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上的獅子和最多（我運行的優勝美地）自動隱藏滾動條顯得更加圓滑。上面的代碼會覆蓋默認值並返回滾動條...與css結合，用於更改溢出以滾動懸停，這將在較新的Mac OSX上爲用戶實現預期的結果。這裏是一個小提琴（不是我自己的，而是我發現這個答案的那個）。 http://jsfiddle.net/simurai/UsvLN/

Answer 4

我想出了這個解決方案。基本上，負邊界切斷了垂直滾動條。

.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混入

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

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

注：@padding應至少滾動條寬度（例如25像素）

這基本上添加到您的LESS/CSS並添加類的元素，需要它的滾動條被切斷。

Answer 5

更改溢出的答案有一堆問題，例如內部塊的寬度不一致，觸發迴流，需要額外的代碼以處理填充以及不禁用鍵盤（以及可能的其他）交互時沒有徘徊。

有是有，不會觸發前所未有的迴流相同的效果更簡單的方法：用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 6

如果您可以使用css在正常視圖中添加overflow-y隱藏。那麼您可以添加：hover事件添加overflow-y：auto。

See This Link

---

如果你可以使用jQuery使用懸停事件

See This Fiddle

---

段：

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>

Answer 7

#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>