Overview: Add iFrame-like scrolling to content, but only on specific pages

Solution: Create Page template and add jScrollPane jQuery

Live example: jScrollPane jQuery scrollbars on Body Conceptions

1. Download jScrollPane – Cross-browser styleable scrollbars with jQuery and CSS

2. Place Script and Style folders in child theme folder

3. Copy header.php file from Twenty Eleven, and add:

[php]<!– Start jScrollPane styling http://jscrollpane.kelvinluck.com/ –>
<!– styles needed by jScrollPane –>
<link type="text/css" href="<?php bloginfo( ‘stylesheet_directory’ ); ?>/style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!– latest jQuery direct from google’s CDN –>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!– the mousewheel plugin – optional to provide mousewheel support –>
<script type="text/javascript" src="<?php bloginfo( ‘stylesheet_directory’ ); ?>/script/jquery.mousewheel.js"></script>
<!– the jScrollPane script –>
<script type="text/javascript" src="<?php bloginfo( ‘stylesheet_directory’ ); ?>/script/jquery.jscrollpane.min.js"></script>

<!– jScrollPane function –>
<script type="text/javascript" id="sourcecode">
$(function()
{
$(‘.scroll-pane’).jScrollPane(
{
autoReinitialise: true, /* Fix for scrollbars on Safari/Chrome WebKit. About page content wasn’t scrolling all the way to the bottom. */
showArrows: true,
verticalDragMinHeight: 10,
verticalDragMaxHeight: 10,
verticalGutter: 15,
}
);
});
</script>
<!– End jScrollPane styling http://jscrollpane.kelvinluck.com/ –>[/php]

4. Copy page.php file from Twenty Eleven, rename to iframe-page.php and make it a template file.

Add the following to the top of the file:

[php]* Template Name: iFrame Template
* Description: A Page Template that adds an iFrame to pages[/php]

Then, wrap get_template_part with the scroll-pane and box classes, like this:

[php]<div class="scroll-pane box">
<?php get_template_part( ‘content’, ‘page’ ); ?>
</div>[/php]

5. style.css file (this is NOT to style the scrollbars):

[css].box {
float: right;
height: 330px;
overflow: auto;
width: 490px;
}[/css]

6. All scrollbar styling is done via jScrollPane’s stylesheet, located at: child theme > style > jquery.jscrollpane.css