Mac/Safari/ Chrome hover显示scroll

hover to scroll

一、方案

翻了Google很多方法，当时有几个参考方案

• jQuery插件 ： jScrollPane ---但该插件用的是jQuery，不是原生js，

jScrollPane

• 用div遮住scrollbar，滚动的时候在展示--- Mac的Chrome里滚动条不是一直显示, overflow:auto没反应
• 撸了一遍perfect-scrollbar 插件，发现并没有什么乱用

二、代码思路

• hover的时候overscroll:scroll,这样滚动条就出现了
• ::-webkit-scrollbar 添加scrollbar的一些属性样式调整
• mouseenter,mouseleave控制类的存在

// app.component.html
<div class="app">
  <ul (mouseenter) ="mouseEnter($event) " (mouseleave) ="mouseLeave($event) " [class.scroll-show]="showScroll">
    <li *ngFor="let item of content; let index of index">{{item}}</li>
  </ul>
</div>

//app.component.scss
.app {
  ul, li {
    list-style: none;
  }
  ul {
    width: 300px;
    height: 400px;
    overflow: hidden;
    margin-left: 100px;
    margin-top: 100px;
    background: aliceblue;
    padding-top: 20px;
    &:hover {
      overflow-y:scroll;
    }
  }
  .scroll-show::-webkit-scrollbar
  {
      width: 5px;
      background: transparent;
  }
   .scroll-show::-webkit-scrollbar-track
  {
      width: 5px;
      background: transparent;
  }
   .scroll-show::-webkit-scrollbar-thumb
  {
      width: 5px;
      height: 30px;
      width: 5px;
      border-radius: 3.5px;
      background-color: #D8D8D8;
  }
}

// app.component.ts

export class AppComponent implements OnInit{
  title = 'app-scrollbar';
  showScroll = false;
  content = [];

  ngOnInit() {
      this.content = Array(30).fill('Lorem ipsum dolor   sit amet consectetur');
   }
  mouseEnter(e) {
    this.showScroll = true;
  }
  mouseLeave(e) {
    this.showScroll = false;

  }
}

github账号： https://github.com/slwzero