mdbootstrap / perfect-scrollbar

Minimalistic but perfect custom scrollbar plugin. Get more free components with Material Design for Bootstrap UI Kit (link below)
https://perfectscrollbar.com/
MIT License
346 stars 66 forks source link

Scroll bar is displayed even though it is not scrollable height #11

Open kaito3desuyo opened 3 years ago

kaito3desuyo commented 3 years ago

Hi.

I am using perfect-scrollber as Angular directive, but I found this bug and report it.

https://github.com/mdbootstrap/perfect-scrollbar/commit/daeeddf5972c44a960f1d244a4b9719cb7c3d0b7 With the above modifications included in v1.5.2, the title phenomenon will occur under certain conditions. That particular condition is ・Google Chrome / Microsoft Edge (Chromium Engine version) ・Scaling is set on the screen displaying the browser (I checked by scaling 150%) ・The height is specified for the container with calc(100vh - {n}px) ・The height of the container you are trying to scroll contains after the decimal point

i.containerWidth = Math.round(rect.width);
i.containerHeight = Math.round(rect.height);

i.contentWidth = element.scrollWidth;
i.contentHeight = element.scrollHeight;

Under these conditions, rect.height and element.scrollHeight will not necessarily have the same value, even if you set it to a non-scrollable height. For example, rect.height = 1200.33px, element.scrollHeight = 1201px. Therefore, the Math.round function rounds rect.height so that 1200px <1201px, and the scroll bar is always displayed.

The current workaround is to downgrade to v1.5.1. Do you have any good ideas?