remove scroll bar from overflow items in angular

Question

* Project Description

I am creating a responsive Players info page for a website using angularJS, and on the far left i am making a list of all other players in the database shown as picture icons where the user can click on any one to get their info page.

* Problem

My Problem is that i want to make the list a specific height "the height of the users browser window or the width of the user screen on mobile mode", and to solve this i used "overflow: Auto" which did exactly that, but it also produced an ugly scroll bar "in the desktop mode or large window in general" which i want to get rid of, in the "small and xs" i don't mind the scroll bar but on "large" windows the scroll bar is ugly.

* what I tried

I tried making a css class where i place a padding which hide the scroll bar.

Code

    width: 100%;
    overflow: auto;
    height: 100%;
    padding-right: 15px;

but it produced other bugs and its not perfect as on some windows the scrollbar size is different and it won't hide it all, also on mobile it removed the scroll bar which is not ideal.

* What I want/ What's expected

I want to

remove the scroll bar from "larger than small screens' and ideally keep it on "small and extra small screens".
change the appearance of that specific scroll bar to match the website design or change its shape in general.

Either option is good enough for me.

* My Code

Stackblitz Project

- Used Libraries and versions

Angular Js V:5.1
Flex-Layout "angular" V: 2.00 beta 12
Angular Material V: 5.01

user2767169 · Accepted Answer · 2021-03-10 03:31:38Z

2

This should give you the momentum you need to do what you need to:

I snagged this code from W3Schools recently to do something similar and changed it to what's below.

Some media queries and changing the width to 0 might just do the trick of hiding the scrollbar. The rest of how it looks is all up to you.

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 5px grey;  */
  /* border-radius: 5px; */
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25); 
  /* border-radius: 5px; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  cursor: grab;
}

answered Mar 10, 2021 at 3:31

user2767169

586 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yousif fayed Over a year ago

That's quite perfect, Thank you :)

Collectives™ on Stack Overflow

remove scroll bar from overflow items in angular

* Project Description

* Problem

* what I tried

Code

* What I want/ What's expected

* My Code

- Used Libraries and versions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

* Project Description

* Problem

* what I tried

Code

* What I want/ What's expected

* My Code

- Used Libraries and versions

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related