Making a custom scrollbar hide and unhide on hover

StackOverflow https://stackoverflow.com/questions/18184108

  •  24-06-2022
  •  | 
  •  

Frage

How can I make a scrollbar for my page that appears when I place my cursor at the corner ?

I found out a way to make the scrollbar appear and disappear on hover by using the following:

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

div:hover { overflow-y:scroll; }

But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.

Please suggest me a way to do so.

War es hilfreich?

Lösung

what i have understood is that you want something like this

<!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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top