skip to Main Content

Here I have added a table with max height if it exceeds the height then custom scroller shows.The issues is it’s not showing on mobile devices until its scrolled.

enter image description here

.scan-by-blocks .scan-by-block .legend {
  max-height: 120px;
  overflow-y: auto;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
  width: 8px;
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
  background-color: var(--grey-dark);
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
}

.scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

I want to keep them on mobile devices even it’s not scrolled.

2

Answers


  1. I’m not quite sure yet, but can you try to change your overflow-y: auto into overflow-y: scroll?

    .scan-by-blocks .scan-by-block .legend {
     max-height: 120px;
     overflow-y: auto;
    }
    
    .scan-by-blocks .scan-by-block .legend::-webkit-scrollbar {
     width: 8px;
    }
    
    .scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-thumb {
     background-color: var(--grey-dark);
     border-radius: 5px;
     -webkit-box-shadow: inset 0 0 6px var(--grey-dark);
    }
    
    .scan-by-blocks .scan-by-block .legend::-webkit-scrollbar-track {
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 5px;
    }
    
    Login or Signup to reply.
  2. Change youroverflow-y: auto; to overflow-y: scroll; in .scan-by-blocks .scan-by-block .legend. If the issue persists, comment out all your custom scrollbar styles below and then retry it.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search