Есть ли способ больше настроить кнопку полосы прокрутки? - PullRequest
Новая
       39

Есть ли способ больше настроить кнопку полосы прокрутки?

0 голосов
/ 02 марта 2019

Я использую webkit-реализацию полосы прокрутки для пользователей, использующих только Chrome, через программирование на CSS.

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

Если кто-нибудь из вас знает, как перевернуть саму полосу прокрутки без инвертирования содержимого, скажите, пожалуйста, мне бы очень хотелосьзнать. Я знаю, что, возможно, есть другие способы сделать это вне CSS, но в моей ситуации у меня должно быть решение по CSS.

В противном случае я пыталсязакодируйте это, запустите код, чтобы увидеть то, о чем я говорил: 

/* SCROLL BAR */
/* URL's to images that were converted to data URI's
          Down: http://i.imgur.com/YNqmT9k.png
   Down Active: http://i.imgur.com/hWIaNsY.png
 Down Disabled: http://i.imgur.com/b7qGKL0.png
          Left: http://i.imgur.com/cL5mFwu.png
   Left Active: http://i.imgur.com/iuucflB.png
 Left Disabled: http://i.imgur.com/ifPTTqJ.png
         Right: http://i.imgur.com/2hAKwF4.png
  Right Active: http://i.imgur.com/bqJfZnR.png
Right Disabled: http://i.imgur.com/tc5OiSR.png
            Up: http://i.imgur.com/JU9dTiB.png
     Up Active: http://i.imgur.com/NdSzXBk.png
   Up Disabled: http://i.imgur.com/1MilXmj.png
       Resizer: http://i.imgur.com/qcqpBJW.png
*/
.custom::-webkit-scrollbar
{
  width: auto;
}
/* arrow buttons */
.custom::-webkit-scrollbar-button {background-color: #0e0e0e;background-repeat: no-repeat;background-position: center;}
.custom::-webkit-scrollbar-button:active {background-color: #868686;}
.custom::-webkit-scrollbar-button:hover:not(:active) {background-color: #2c2c2c;}
.custom::-webkit-scrollbar-button:horizontal:increment {background-image: url('http://i.imgur.com/2hAKwF4.png');}
.custom::-webkit-scrollbar-button:horizontal:increment:active {background-image: url('http://i.imgur.com/bqJfZnR.png');}
.custom::-webkit-scrollbar-button:horizontal:increment:disabled {background-image: url('http://i.imgur.com/tc5OiSR.png');}
.custom::-webkit-scrollbar-button:horizontal:decrement {background-image: url('http://i.imgur.com/cL5mFwu.png');}
.custom::-webkit-scrollbar-button:horizontal:decrement:active {background-image: url('http://i.imgur.com/iuucflB.png');}
.custom::-webkit-scrollbar-button:horizontal:decrement:disabled {background-image: url('http://i.imgur.com/ifPTTqJ.png');}
.custom::-webkit-scrollbar-button:vertical:increment {background-image: url('http://i.imgur.com/YNqmT9k.png');}
.custom::-webkit-scrollbar-button:vertical:increment:active {background-image: url('http://i.imgur.com/hWIaNsY.png');}
.custom::-webkit-scrollbar-button:vertical:increment:disabled {background-image: url('http://i.imgur.com/b7qGKL0.png');}
.custom::-webkit-scrollbar-button:vertical:decrement {background-image: url('http://i.imgur.com/JU9dTiB.png');}
.custom::-webkit-scrollbar-button:vertical:decrement:active {background-image: url('http://i.imgur.com/NdSzXBk.png');}
.custom::-webkit-scrollbar-button:vertical:decrement:disabled {background-image: url('http://i.imgur.com/1MilXmj.png');}
/* foreground bar */
.custom::-webkit-scrollbar-thumb
{
  background-color: #3e3e3e;
  border: none;
}
.custom::-webkit-scrollbar-thumb:horizontal {border-top: 2px solid #0e0e0e;border-bottom: 2px solid #0e0e0e;}
.custom::-webkit-scrollbar-thumb:vertical {border-left: 2px solid #0e0e0e;border-right: 2px solid #0e0e0e;}
.custom::-webkit-scrollbar-thumb:active:hover
{
  background-color: #878787;
}

.custom::-webkit-scrollbar-thumb:hover
{
  background-color: #575757;
}
/* background bar */
.custom::-webkit-scrollbar-track
{
  background-color: #0e0e0e;
  border: none;
}
/* corner, when there is converged scrollbars */
.custom::-webkit-scrollbar-corner
{
  background-color: #232323;
}

.custom::-webkit-resizer
{
  border-top: 1px solid #262626;
  border-left: 1px solid #262626;
  background-image: url('http://i.imgur.com/qcqpBJW.png');
}

/* Firefox */
.custom:*
{
  scrollbar-color: #3d3d3d #0e0e0e;
  scrollbar-width: auto;
}
Examine the hover effect when hovering over the scrollbar's buttons either at the top or bottom (bar also fully at top or bottom). Then, move it somewhere in the center.
<center><table cellspacing="6" style="font-family:'Comic Sans MS','Comic Sans',cursive;">
<tr><td>
<center style="padding-top:9px;padding-bottom:15px;"><b>Chrome Default:</b></center>
<div style="height:200px;width:160px;border:1px solid #ccc;overflow:scroll;">
Notice how the<br>
bar normally<br>
reacts when it<br>
reaches the top<br>
or the bottom.<br>
The button gets<br>
that "disabled"<br>
look.<br>
<br>
[place holder text to give scrollbar length]
</div></td>

<td style="background-color:black;color:white;">
<center><b>invert(100%);<br>(to simulate it):</b></center>
<div style="filter:invert(100%);color:black;height:200px;width:160px;border:1px solid #ccc;overflow:scroll;"><b>
Just like the<br>
default, when the<br>
bar is at the top<br>
or bottom, it has<br>
that "disabled"<br>
button look.<br>
<br><br><br>
[place holder text to give scrollbar length]</b>
</div></td>

<td style="background-color:black;color:white;">
<center style="padding-top:9px;padding-bottom:15px;"><b>My Code:</b></center>
<div style="height:200px;width:160px;border:1px solid #ccc;overflow:scroll;" class="custom">
Now when my<br>
scrollbar reaches<br>
the top, it doesn't<br>
get that "disabled"<br>
look unlike the<br>
other bars.<br>
<br><br><br>
[place holder text to give scrollbar length]
</div></td></tr>
</table></center>
...