Как оформить полосы прокрутки в DIV с помощью CSS в Mobile Safari? - PullRequest
Новая
       44

Как оформить полосы прокрутки в DIV с помощью CSS в Mobile Safari?

0 голосов
/ 04 февраля 2020

У меня есть DIV, содержащий широкий TABLE. Следующий sass mixin отлично работает на настольном Safari и Chrome, но не на Mobile Safari. 

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%), $border-radius: 0px) {

  // New standards
  scrollbar-width: $size;  // e.g. thin
  scrollbar-color: $foreground-color $background-color;

  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
    border-radius: $border-radius;
    //padding: 3px 3px;
    //margin: 3px;
    border: $scrollbar-thumb-border;
  }

  &::-webkit-scrollbar-track {
    //background: $background-color;
    //box-shadow: #BBBBBB 0 0 5px inset;
    padding: 3px 3px;

  }

  // For Internet Explorer
  // (body needed perhaps? Global only? Well, we'll see
  //body {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  //}
}

(адаптировано из: https://css-tricks.com/snippets/sass/custom-scrollbars-mixin/)

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

::-webkit-scrollbar {...}
::-webkit-scroll-track {...}

... но не DIV: /

...