製作自定義滾動條時隱藏並取消隱藏

我發現了一種方法，使滾動條出現，通過使用消失懸停如下：

div { overflow:hidden;height:whatever px; } 

div:hover { overflow-y:scroll; }

但只適用於div標籤。我希望滾動條僅在我將光標放在頁面右側時纔會出現。我嘗試使用body而不是div，但它會干擾所有頁面，甚至對那些內容較少的頁面。

請給我一個這樣做的方法。

來源

2013-08-12 Swagata Barua

可以請你做的jsfiddle？ – Ali

好吧給我一分鐘我會讓一個 –

jsfiddle倒下。使用http://www.jsbin.com – Ali

我所瞭解的是，你想是這樣的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Liveweave</title> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script> 

    $(document).ready(function(){ 
     $('.right').hover(function(){ 
     $('.box').css('overflow-y','scroll'); 
     },function(){ 
     $('.box').css('overflow','hidden'); 
     }); 
    }); 
    </script> 


    <style type="text/css"> 


.box 
{ 
    overflow:hidden; 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    overflow: hidden; 
} 

.box:hover 
{ 
     /*overflow-y:scroll;*/ 
} 

     .body{width:100%} 
     .right{float:right;min-height:50px;position:absolute;right:0} 

    </style> 

</head> 

<body> 
<div class="body"> 
    <div class="right"> 
    right edge 
    </div> 
    <div class="box">asdfsadfsdafsdafsdaf, 
    sdfsdfsdfsdfsdfsd 
    sadfsd 

    sdf 
    sadf 
    sdf 
    dsf 
    sdfdsfsdfsdfsdfsdfsdaf 
    sdffsdf</div> 






</body> 




</html>

來源

2013-08-12 10:44:12 Lab

你所做的就是我想要的行爲，但我不想在箱子裏。我希望它爲身體，只有當我懸停在頁面邊緣時才需要它。 –

腳本部分更改爲 – Lab

也用替換css .right {float：right; min-height：100％; position：absolute; right：0} – Lab

製作自定義滾動條時隱藏並取消隱藏

回答

相關問題