0

I am implementing a comment box and using the perfect-scrollbar plugin in order to implement the scrolling functionality. Whenever I load my page, which is built using angular I have dummy comment text that populates the inside of the comment box. Within the same controller I set a $timeout of 500 ms and call a function that initializes the comment box's scrollbar. The scrolling functionality works, but not properly. The scrollbar is not visible and the comment box scrolls to twice the height of its content such that I reach the end of the comments and there is blank space still available to scroll.

I tried to recreate the problem within jsfiddle but everything works flawlessly. Here is my fiddle. Here is the head portion of my app

<head>
  <script src="scripts/angular.min.js" type="application/javascript"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/css/perfect-scrollbar.min.css" type="text/css"></link>
  <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/js/min/perfect-scrollbar.min.js"></script>
  <link href="appDetails.css" type="text/css" rel="stylesheet"></link>
  <script src="appDetails.js" type="application/javascript" ></script>
</head>

My javascript file where I perform the calls to initialize the scrollbar looks exactly the same as the fiddle.

If you would like to run the test in your browser or examine the exact code being run here is the html file link to a copy on google drive.

Priyanga
  • 143
  • 1
  • 3
  • 16
Alan
  • 1,134
  • 2
  • 13
  • 25

1 Answers1

1

The perfect-scrollbar CSS is not getting included properly by your file, so the Y scrollbar is stuck at the bottom of the content instead of being position: absolute like it was supposed to. It works in the fiddle because the CSS has been explicitly added as an external resource.

You need to add rel="stylesheet" to your <link> tag so the browser will interpret it as styling.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.3/css/perfect-scrollbar.min.css">
Kristján
  • 18,165
  • 5
  • 50
  • 62
  • I unfortunately did not think this was necessary and would sometimes omit it from my code. I found out the hard way. Anyways thanks. – Alan Jul 17 '15 at 16:53