css 一种在Mac OS X Lion中始终保持滚动条的方法

Posted 2021-05-13

// "Anyone figured how to force the scrollbar in Lion with css/html/javascript? i.e. without sys prefs" @andyshaw85


// "As soon as we thought we settled the "above the fold" discussions, with Lion it's back, more than ever..!!! ;-( But luckily we can just overwrite the default and force the srollbar back!" @simurai


// "I've added a sniffer for Lion. The reason is I want to get default system behaviour i.e. in Snow Leapard the user will get aqua scrollbars and in Lion they will get iOS style overlay scrollbars. Now whenever I want to use this I add to the element .showScroll" @andyshaw85


if (navigator.appVersion.indexOf("10_7") != -1) {
      
  jQuery('.showScroll').addClass('lion');
    
}

/* Overwrite the default to keep the scrollbar always visible */

.showScroll.lion::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.showScroll.lion::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}