-1

image1

enter image description here

in this image, there is no scroll bar but if I scroll down inside diagram component div element scrollbar will occur

image2 with scrollbar

enter image description here

how can I hide that scrollbar without setting overflow: hidden

references

enter image description here

enter image description here

Vijay VJ
  • 240
  • 3
  • 17
  • Make sure the wrapping element is fitting the content and there won't be a scrollbar. Perhaps it has a fixed height or it could be some other css, we don't know from an image. – Dominic Jun 13 '18 at 09:25
  • Make it transparrent. https://stackoverflow.com/questions/23200639/transparent-scrollbar-with-css –  Jun 13 '18 at 09:26
  • @DominicTobias, see question again I added new images – Vijay VJ Jun 13 '18 at 09:33

2 Answers2

3

Just use the CSS of it like that:

selector-with-overflow::-webkit-scrollbar {
    width: 10px;
    visibility: hidden;
    display: none;
}

notice doesnt work on all browsers but should work on the most common ones

Tobias Fuchs
  • 910
  • 5
  • 8
0

I'm not sure why you'd ever want to hide the indication that a page is overflowing, see this JSFiddle: http://jsfiddle.net/2nT38/868/ for the css for a scrollbar that isn't visible yet still scrollable. Here's the breakdown:

::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 0px;
}
::-webkit-scrollbar:horizontal {
    height: 0px;
}

Hope this helps!

Nita
  • 149
  • 12
  • I checked that Jsfiddle, if change widh and height, scroll is not displayed. I think there is some pblm – Vijay VJ Jun 13 '18 at 09:49
  • I thought that's what you wanted? To **not** display the scrollbar? – Nita Jun 13 '18 at 09:52
  • check this link please.. http://npmci.syncfusion.com/production/javascript/demos/#/material/diagram/default-functionalities.html – Vijay VJ Jun 13 '18 at 10:46
  • You shouldn't have different layouts and functionalities - if you are going to hide the scrollbar you should do so across the board. The example you provided does not cater for scrolling via other means than a scrollbar so it would be a terrible user experience to remove the scrollbar from that example. – Nita Jun 14 '18 at 10:17