How to configure the perfect-scrollbar jQuery plugin

Today I encountered a problem with the perfect-scrollbar jQuery plugin on a WordPress page whose content needed to scroll as one block. The plugin worked correctly with plain text, but the layout broke when an ol, ul, or table element was added. I did not test other elements.

Those elements appeared below the scrolling text, and part of the content fell outside the scrollbar.

After five hours of working with CSS and searching online, I noticed that the scrolling element was a p tag. The documentation at the perfect-scrollbar repository stated that versions up to 0.3.4 required a single content element, such as a div, inside the container. I changed the p element to a div, and the scrollbar worked correctly.

Setting display: block may also have been sufficient, but I did not test that approach.

The practical lesson: use a div as the scrolling container.

Share this

This entry was posted in Blog, Hacks. Bookmark the permalink.

Leave a Reply