Mac/Safari/ Chrome hover显示scrollbar滚动条 --angular6

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
  • {{item}}
//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

你可能感兴趣的:(Mac/Safari/ Chrome hover显示scrollbar滚动条 --angular6)