「完美滾動條」在iframe上的使用

我正在尋找定製我的iframe滾動條的跨瀏覽器解決方案。我不是很高級的JavaScript，所以我一直在尋找一個CSS解決方案。我發現了webkit瀏覽器的css解決方案，但這隻適用於opera，chrome，但不適用於IE。現在，我可以看到我無法避免使用js。我正在尋找一個好的解決方案，這來我的手「完美滾動條」在iframe上的使用

PERFECT SCROLLBAR

我有紅色的文檔，BU我感到有點困惑。我已經下載了它的最新版本。該文件夾包含許多文件，我真的不知道如何處理它們。還有像「min」和「src」這樣的文件夾。那麼任何人都可以告訴我如何使用這個插件？我應該在我的html中包含哪些文件，以及我應該做些什麼來完成任務？我知道，我應該先學習js和jquery，但如果有人能夠在這裏獲得幫助，我將不勝感激。謝謝

編輯：好吧，我設法讓它工作一點點。我需要將該滾動條應用於iframe。但是，我有一些困難。當我這樣做，就像你可以看到下面，當我把鼠標移到我的iframe上時，滾動條出現，但默認的滾動條也停留在那裏，只有默認的滾動條有效。

這是我的主網頁的代碼：

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>TITLE</title> 
<link rel="stylesheet" type="text/css" media="all" href="css/main.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/menu.css" /> 

<link rel="stylesheet" type="text/css" media="all" href="css/perfect-scrollbar-0.4.8.min.css" /> 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> 
<script type="text/javascript" src="js/menu.js"></script> 
<script type="text/javascript" src="js/contChange.js"></script> 

<script type="text/javascript" src="js/perfect-scrollbar-0.4.8.min.js"></script> 
<script type="text/javascript" src="js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"> </script> 
<script type="text/javascript" src="js/scroll.js"></script> 


</head> 

<body> 

<div id="div1" class="contentHolder" style="display:none"> 
<iframe width="340" height="525" frameborder="0" src="content/page.html"></iframe> 
</div> 

</div> 

</body> 
</html>

這裏是CSS：

.contentHolder { 
position:relative; 
overflow:hidden; 
}

和JS（附帶scroll.js）：

$(document).ready(function() { 

$('#div1').perfectScrollbar(); 

});

來源

2014-03-14 user2886091

add these lines of code for your code.. 
<script src="perfect-scrollbar-0.4.8\src/jquery.mousewheel.js"></script> 
<script src="perfect-scrollbar-0.4.8\src/perfect-scrollbar.js"></script> 
<link href="perfect-scrollbar-0.4.8\src/perfect-scrollbar.css"/> 

for scrollbar write as they mentioned in the document.. 
<style> 
#Demo { position: 'relative'; } 
</style> 
<script> 
    $('#Demo').perfectScrollbar(); 
</script> 
<div id='Demo'> 
<div> 
... 
</div> 
</div>

來源

2014-03-14 09:55:34

謝謝。我編輯了我的問題。我需要在我的iframe上應用完美滾動。你會如此友善，你會看我的代碼嗎？ – user2886091

你有一個官方回購示例：

https://github.com/noraesae/perfect-scrollbar/blob/master/examples/iframe.html

你可以用完美的滾動條初始化iframe中的內容

Ps.initialize(iframe.contentDocument.querySelector('#Default'));

來源

2016-02-17 12:12:03

「完美滾動條」在iframe上的使用

回答

相關問題