Создание пользовательской полосы прокрутки скрывать и показывать при наведении

Как сделать полосу прокрутки для моей страницы, которая появляется, когда я помещаю курсор в угол?

Я нашел способ заставить полосу прокрутки появляться и исчезать при наведении, используя следующее:

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

div:hover { overflow-y:scroll; }

Но это относится только к тегам div. Я хочу, чтобы полоса прокрутки появилась только тогда, когда я наведу курсор на правый край страницы. Я пытался с помощью body вместо div но тогда это мешает всем страницам, даже тем, которые имеют меньше содержимого.

Пожалуйста, предложите мне способ сделать это.

Источник

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>
Источник
Другие вопросы по тегам