Эмулировать Chrome полосу прокрутки с настраиваемой полосой прокрутки - отключить событие наведения на кнопку полосы прокрутки - PullRequest
Новая
       0

Эмулировать Chrome полосу прокрутки с настраиваемой полосой прокрутки - отключить событие наведения на кнопку полосы прокрутки

0 голосов
/ 18 июня 2020

Я пытаюсь имитировать полосу прокрутки Windows Chrome с помощью настраиваемой полосы прокрутки. Я очень близок. Все, что остается, - это остановить событие наведения курсора на кнопку полосы прокрутки, когда ползунок полосы прокрутки находится напротив нее. Я уже написал несколько jquery, чтобы изменить изображение кнопки, когда большой палец находится напротив него, поэтому я думаю, что довольно легко добавить $(this).unbind('mouseenter mouseleave'); в функцию scroll(), но «this» должно быть равно body.scrollbar.up::-webkit-scrollbar-button:single-button:vertical:decrement, и я могу Не понимаю, как это сделать. Это то, что у меня есть до сих пор, включая инструкции unbind и bind, которые я хочу, которые сейчас не действуют: 

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      $("body").removeClass("up");
      $(this).bind('mouseenter mouseleave');
    } else {
      $("body").addClass("up");
      $(this).unbind('mouseenter mouseleave');
    }    
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $("body").addClass("down");
       $(this).unbind('mouseenter mouseleave');
    } else {
      $("body").removeClass("down");
      $(this).bind('mouseenter mouseleave')
    }  
  });
});
body.scrollbar::-webkit-scrollbar {
    width: 17px;
    background-color: rgba(240, 240, 240);
}

body.scrollbar::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    background-clip: content-box;
}
body.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a3a3a3;
}

body.scrollbar::-webkit-scrollbar-thumb:active {
    background-color: #505050;
}

body.scrollbar::-webkit-scrollbar-button:single-button {
    display: block;
    height: 17px;
}

/* Up */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.up::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowupup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowuphov.jpg);
}

/* Down */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.down::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdowndown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdownhov.jpg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body style="height:1550px;" class="scrollbar up">

<p>Scroll down this page.</p>

<p style="position:fixed;">Scroll the page and see the scrollbar look and function exactly the same as the stock windows version of Chrome scrollbar.  Hover the arrow buttons and see them change.  Now help me kill that hover effect when the scrollbar-thumb is up against the arrow buttons, just like the real chrome scrollbar.</p>

</body>

Я также поместил код в фрагмент кода

1 Ответ

1 голос
/ 18 июня 2020

Мое решение - добавить еще один класс top, когда прокрутка вверху, и bottom, когда он внизу.

Затем для наведения css используйте :not(.top) и :not(.bottom), чтобы указать, применяется только указание, когда верх и низ не применяются соответственно.

При загрузке страницы я также добавил соответствующие классы, если верх или низ страницы. 

$(document).ready(function() {
if ($(document).scrollTop() == 0) {
      $("body").addClass("up top");
}
else if($(window).scrollTop() + $(window).height() == $(document).height()) {
  $("body").addClass("down bottom");
}
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      $("body").removeClass("up top");
      $(this).bind('mouseenter mouseleave');
    } else {
      $("body").addClass("up top");
      $(this).unbind('mouseenter mouseleave');
    }    
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $("body").addClass("down bottom");
       $(this).unbind('mouseenter mouseleave');
    } else {
      $("body").removeClass("down bottom");
      $(this).bind('mouseenter mouseleave')
    }  
  });
});
body.scrollbar::-webkit-scrollbar {
    width: 17px;
    background-color: rgba(240, 240, 240);
}

body.scrollbar::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    background-clip: content-box;
}
body.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a3a3a3;
}

body.scrollbar::-webkit-scrollbar-thumb:active {
    background-color: #505050;
}

body.scrollbar::-webkit-scrollbar-button:single-button {
    display: block;
    height: 17px;
}

/* Up */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.up::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowupup.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar:not(.top)::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowuphov.jpg);
}

/* Down */
body.scrollbar::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}
body.scrollbar.down::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdowndown.jpg);
    background-size: cover;
    border: none;
    opacity: 1;
}

body.scrollbar:not(.bottom)::-webkit-scrollbar-button:vertical:single-button:increment:hover {
    background-image: url(https://www.golden-painting.com/styles/images/scrollarrowdownhov.jpg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body style="height:1550px;" class="scrollbar up">

<p>Scroll down this page.</p>

<p style="position:fixed;">Scroll the page and see the scrollbar look and function exactly the same as the stock windows version of Chrome scrollbar.  Hover the arrow buttons and see them change.  Now help me kill that hover effect when the scrollbar-thumb is up against the arrow buttons, just like the real chrome scrollbar.</p>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...