search

rintoj / ngx-virtual-scroller

Virtual Scroll displays a virtual, "infinite" list.
https://rintoj.github.io/ngx-virtual-scroller
MIT License
979 stars 295 forks source link

Customize the vitrual scroll #190

Open ghost opened 6 years ago

ghost commented 6 years ago

@rintoj Hello. You have a good library. I have a question: how to customize the vitrual scroll that like this. I need to apply cross browser styles for the scrollbar. Do you have ideas? Thanks for the answer.

Regards, Roman.

whyboris commented 6 years ago

I was able to implement a scroll bar. In my case: <virtual-scroll class="gallery-container" ... And the css:

.gallery-container {
...
  overflow-y: scroll;
...
  @include scrollBar;
}

And the scrollBar:

@mixin scrollBar {
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    background-color: $gray-15;
  }
  &::-webkit-scrollbar {
    width: 10px;
    // background-color: #bbbbbb;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $gray-50;
  }
}

Comment again if you have trouble.

ghost commented 6 years ago

@whyboris this is not cross browser

ghost commented 6 years ago

Me too doesn't work on iOS

speige commented 6 years ago

If anyone is able to solve this, please submit a pull request & I'll look at it.

ghost commented 6 years ago

https://stackblitz.com/edit/angular-aba8se @speige

speige commented 6 years ago

@inside-space This stackblitz appears to be a working solution with a different scrolling library at https://github.com/dhilt/ngx-ui-scroll and a scrollbar styling library at https://github.com/MurhafSousli/ngx-scrollbar

If someone is willing to convert this stackblitz into one which uses https://github.com/MurhafSousli/ngx-scrollbar and https://github.com/rintoj/angular2-virtual-scroll that would be ideal for testing/troubleshooting.

Afterwards, assuming the new stackblitz isn't working, if someone could code a fix & submit a pull request, that'd be even better!

I don't have time to code this feature, but I'm happy to accept a PR. I'll leave it open as an enhancement in case someone wants to pick it up. Thanks.