Question

当我将光标放在角落时，如何为我的页面制作滚动条？

我发现了一种方法可以使滚动条显示并在悬停时使用以下内容消失：

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

div:hover { overflow-y:scroll; }

但这仅适用于div标签。我希望只有当我将光标放在页面的右边缘时才会出现滚动条。我尝试使用body代替div但是它会干扰所有页面，甚至是那些内容较少的页面。

请建议我这样做的方法。

Answer 1

我所理解的是你想要这样的东西

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

在悬停时隐藏和取消隐藏自定义滚动条

1 个答案: