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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...