Форум

Hol1killer · #1 (**permalink**) 14.01.2015, 03:27

Всем привет, интересует вопрос можно ли как - то прокручивать iframe без стандартного iframe ползунка. Цель стилизировать ползунок iframe.

Можно ли воспользовать jquery.mcustomscrollbar с iframe, кто-то имеет такой опыт или какие-то альтенративные решения ???

За любую помощью благодарствую.

ruslan_mart · #2 (**permalink**) 14.01.2015, 05:34

Hol1killer, если iframe с чужого домена, то нельзя. А так всё можно. Запихивай весь контент в div с overflow: hidden, и меняй свойство div.scrollTop через JS.

Hol1killer · #3 (**permalink**) 14.01.2015, 11:24

Ruslan_xDD,
Спасибо за ответ. Получается если в случаи вставки iframe с чужого домена, то воспользоваться JS вообще никак нельзя ??? Или есть какие-то обходные пути и костыли ?

ruslan_mart · #4 (**permalink**) 14.01.2015, 11:37

Hol1killer, нельзя, политика безопасности.

Malleys · #5 (**permalink**) 14.01.2015, 12:41

Сообщение от Hol1killer

прокручивать iframe без стандартного iframe ползунка. Цель стилизировать ползунок iframe

В Chrome можно использовать к ползункам CSS-селектор iframe::-webkit-scrollbar

<style>

iframe::-webkit-scrollbar {
  width: 1em;
}
 
iframe::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: inset 0 0 4px #000000;
    border-radius: 0.5em;
}
 
iframe::-webkit-scrollbar-thumb {
  background-color: #61456a;
  box-shadow: inset 0 0 4px #ffffff;
  border-radius: 0.5em;
}

iframe {
  margin: auto;
  display: block;
  width: 50%;
  overflow: scroll;
}
  
</style>
<iframe width="560" height="315" src="http://www.fontsquirrel.com/home" frameborder="0"></iframe>

Hol1killer · #6 (**permalink**) 14.01.2015, 13:17

Да за эту наводку тоже спасибо.

Но это движки на webkit потянут, а остальные Mozila, IE - там стилизировать не получиться скорее всего...

ruslan_mart · #7 (**permalink**) 14.01.2015, 13:27

Можно по извращаться.

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    
    <div style="height: 480px; overflow: auto; width: 640px">
    	<iframe frameborder="0" height="4025" src="http://www.fontsquirrel.com/home" scrolling="no" width="1349"></iframe>
    </div>
    
  </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript