CODEWITHSUNDEEP
cssangularangular-flex-layout
yousif fayed
yousif fayed

Reputation: 341

remove scroll bar from overflow items in angular

* 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

  1. remove the scroll bar from "larger than small screens' and ideally keep it on "small and extra small screens".
  2. 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

Upvotes: 0

Views: 1722

Answers (1)

user2767169
user2767169

Reputation: 58

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;
}

Upvotes: 2

Related Questions