Jump to content
gongpex

iframe custom scrollbar

Recommended Posts

Hello everyone,

I've search on google about iframe custom scrollbar tutorial but I didn't find it.

Thing that I found only 'custom scrollbar tutorial' NOT iframe custom scrollbar.

please see this link : https://stackoverflow.com/questions/22618452/custom-scrollbar-using-jquery-for-iframe-with-customer-url

Q : Maybe y'all know where is the tutorial about custom iframe scrollbar?

please tell me

Thanks

Share this post


Link to post
Share on other sites

Any custom scrollbar will also work in an iframe. Just apply the custom scrollbar code to the body element of the document that is in the iframe. 

Share this post


Link to post
Share on other sites

Hello,

Thanks for reply,

Today I used jscrollpane to made custom scrollbar on iframe, it's worked but unable to remove horizontal bar (always displayed both),

this is my code :

<style>
		.scroll-pane
		{
			width: 100%;
			height: 200px;
			overflow: auto;
		}
		
	</style>

<body>
	<!-- iframe -->
	<iframe class="scroll-pane" src="iframe_content1.html" frameborder="0">
		<p>Your browser does not support iframes.</p>
	</iframe>
	
	<script>
	$(document).ready(function(){
		$('.scroll-pane').jScrollPane({
			contentWidth: '0px'
		});
	});
	</script>
</body>

contentWidth was according on : https://stackoverflow.com/questions/4404944/how-do-i-disable-horizontal-scrollbar-in-jscrollpane-jquery

I've tried horizontalDragMaxWidth: 0 also, but the result was same.

please help me

Thanks

Share this post


Link to post
Share on other sites

Hello,

thanks for reply,

I just tried but the result still same :

<style>
  .scroll-pane
  {
    width: 100%;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto; 
  }
</style>

<body>
	<!-- iframe -->
	<iframe class="scroll-pane" src="iframe_content1.html" frameborder="0">
		<p>Your browser does not support iframes.</p>
	</iframe>
	
	<script>
	$(document).ready(function(){
		$('.scroll-pane').jScrollPane({
			contentWidth : 0
		});
	});
	</script>
</body>

please help

Thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×