Использование «идеальной полосы прокрутки» в iframe

Question

Использование «идеальной полосы прокрутки» в iframe

0

Я искал кросс-браузерное решение для настройки полосы прокрутки моего iframe. Я не очень продвинутый с javascript, поэтому я искал css-решение. Я нашел решение css для браузеров webkit, но это работало только в опера, хром, но не в IE. Теперь я вижу, что я не смогу избежать использования js. Я искал хорошее решение, и это пришло мне в руки

СОВЕРШЕННО ПРОКЛАДКА

У меня есть красная документация, я немного немного смущен. Я загрузил последнюю версию. В папке содержится много файлов, и я не знаю, что с ними делать. Существуют также такие папки, как "min" и "src". Так кто может рассказать мне, как использовать этот плагин? Какие файлы следует включать в мой html и какие другие настройки я должен сделать, чтобы все было сделано? Я знаю, что сначала я должен изучить js и jquery, но я буду признателен, если кто-то может быть полезен здесь. спасибо

EDIT: OK Мне удалось немного разобраться. Мне нужно применить эту полосу прокрутки к 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();

 });

user2886091 14 март 2014, в 10:30

Источник

Теги:

javascript

jquery

html

css

perfect-scrollbar

2 ответа

Ещё вопросы

Xavier Boubert · Answer 1 · 2016-02-17T10-23-00.000Z

У вас есть пример в официальном репо:

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

Вы можете инициализировать свой контент iframe с помощью Perfect Scrollbar

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

rk rk · Answer 2 · 2014-03-14T07-04-00.000Z

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>

Спасибо. Я отредактировал свой вопрос. Мне нужно применить идеальный свиток на мой iframe. Не могли бы вы быть так добры и посмотрите мой код, пожалуйста?