Css style iframe scroll

Полоса прокрутки Iframe css

Как мне перейти на изменение css полосы прокрутки iframe ? Моя проблема с текущей полосой прокрутки в моем iframe заключается в том, что кадр не очень широк, и полоса прокрутки в нем громоздка и занимает слишком много места. Использование «scrolling=»no» приводит к тому, что полоса прокрутки исчезает, но затем пользователь не может прокручивать. By путь, Мой браузер Google Chrome.

3 ответа

body < position: absolute; overflow-y: scroll; overflow-x: hidden; >html < overflow-y: auto; background-color: transparent; >::-webkit-scrollbar < width: 10px; height: 10px; display: none; >::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment < height: 30px; background-color: transparent; >::-webkit-scrollbar-track-piece < background-color: #3b3b3b; -webkit-border-radius: 16px; >::-webkit-scrollbar-thumb:vertical

$("#iFrameId").contents().find("-webkit-scrollbar").css("width","5px") 

Вы не можете создать полосу прокрутки (другую, чтобы включить и выключить ее) с помощью CSS вообще.

Есть некоторые проприетарные материалы, которые позволяют применять некоторые стили, но это поддерживается только IE и Opera.

Chrome не предоставляет никаких механизмов для этого.

Как отмечает комментатор, WebKit теперь поддерживает другой проприетарный механизм для стилизации полос прокрутки. Я понятия не имею, если сборка Chrome WebKit была объединена или включена, хотя.

Вы можете посмотреть на замену оптовой продажи прокрутки на JavaScript, а jScrollPane, похоже, делает разумную работу, не нарушая обычного взаимодействия правила.

Тем не менее, изменение внешнего вида пользовательских элементов управления — это то, что я постараюсь избежать, и для чего-то пользователям нужно направить указатель на меньшие наборы с мигающим красным цветом с надписью » Закон о фитнесе.

Лучшее решение, вероятно, будет состоять в том, чтобы «не втирать столько информации в такое маленькое пространство».

Источник

How to Style IFrames With CSS

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Christine Baker is a marketing consultant with experience working for a variety of clients. Her expertise includes social media, web development, and graphic design.

When you embed an element in your HTML, you have two opportunities to add CSS styles to it:

Using CSS to Style the IFRAME Element

The first thing you should consider when styling your iframes is the

set to the size that fits in my document. Here are examples of a frame with no styles and one with just the basics styled. As you can see, these styles mostly just remove the border around the iframe, but they also ensure that all browsers display that iframe with the same margins, padding, and dimensions. HTML5 recommends that you use the

property to remove the scroll bars within a scroll box, but that isn’t reliable. So if you want to remove or change the scroll bars, you should use the

attribute on your iframe as well. To use the

attribute, add it like any other attribute and then choose one of three values:

tells the browser to always include scroll bars even if they aren’t needed.

says to remove all scroll bars whether needed or not.

is the default and includes the scroll bars when they are needed and removes them when they are not. Here is how to turn off scrolling with the

scrollingattribute:scrolling=»no»>This is an iframe.

To turn off scrolling in HTML5 you are supposed to use the

property. But as you can see in these examples it doesn’t work reliably in all browsers yet. Here’s how you would turn on scrolling all the time with the

overflow
property:style=»overflow: scroll;»>This is an iframe.

to turn off the scrolling completely with the

property. Many designers want their iframes to blend in with the background of the page they are on so that readers don’t know that the iframes are even there. But you can also add styles to make them stand out. Adjusting the borders so that the iframe shows up more readily is easy. Just use the

style property (or it’s related

But you shouldn’t stop with scrolling and borders for your styles. You can apply a lot of other CSS styles to your iframe. This example uses CSS3 styles to give the iframe a shadow, rounded corners, and rotated it 20 degrees.

-moz-border-radius: 12px;
-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);>

Styling the Iframe Contents

Styling the contents of an iframe is just like styling any other web page. But, you must have access to edit the page. If you can’t edit the page (for example, it’s on another site).

If you can edit the page, then you can add an external style sheet or styles right in the document just like you would style any other web page on your site.

Источник

CSS modify iframe scroll

The following tutorial shows you how to use CSS to do «CSS modify iframe scroll».

CSS Style

The CSS style to do «CSS modify iframe scroll» is

body !-- w w w . de m o 2 s . c o m--> background-color:white; > header < position:fixed; top:0; left:0; right:0; height:50px; background-color:white; > section < padding:50px 0; background-color:#7fff7f; margin:0 50px; > footer < position:fixed; bottom:0; left:0; right:0; height:50px; background-color:white; >

HTML Body

body> header> Top of the site section> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin quis lorem id facilisis. Nulla sit amet laoreet massa. Aliquam pretium dapibus diam, nec pulvinar lectus finibus et. Integer nec tincidunt tellus. Nullam nec est ornare, rutrum metus sed, cursus augue. Duis sed diam lacinia, lobortis lacus id, auctor est. Nam consequat a dolor et volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere, nulla vel pulvinar venenatis, enim arcu suscipit lorem, vitae viverra lacus tortor eu lacus. Praesent ut volutpat eros. Quisque vel commodo justo, eget vestibulum lorem. p> Praesent quis rutrum erat. Duis ligula magna, sodales vitae cursus vel, vestibulum commodo est. Aenean aliquam imperdiet enim, eu ultricies mi ultrices vestibulum. Mauris a dolor ut nibh dapibus maximus. Fusce suscipit nulla et scelerisque interdum. Praesent sed egestas turpis. Donec nibh lorem, euismod at nisl ac, porta ultrices nibh. Donec ex risus, lobortis quis lectus consectetur, congue ullamcorper lorem. Cras ut rhoncus metus. Curabitur fermentum accumsan pulvinar. Nulla facilisi. Phasellus nec faucibus nulla. Vestibulum orci arcu, aliquet non est nec, fringilla posuere metus. Sed non justo ex. p> Pellentesque eleifend maximus metus, vel varius metus bibendum sit amet. Etiam congue ac orci vel molestie. Sed dignissim arcu id risus condimentum gravida. Donec tempus vel sem in commodo. Sed sed diam sit amet sapien hendrerit porttitor et a risus. Curabitur feugiat, justo vitae molestie hendrerit, dolor nunc eleifend sem, vel dictum dui neque vitae magna. Vestibulum in blandit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. p> Vivamus sagittis porttitor volutpat. Cras ornare turpis at egestas sodales. Fusce ultricies aliquet quam, venenatis pulvinar libero facilisis eu. In tincidunt diam in nisi dictum, in posuere quam vestibulum. Suspendisse varius, purus non mattis efficitur, tellus nulla hendrerit magna, eget interdum mauris velit a ipsum. Nam sollicitudin tristique odio, sed consequat enim fringilla eu. Nam ut sodales elit. Nullam est ante, tempor ac sagittis ac, dignissim et nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra sagittis tellus ac luctus. In a odio et erat pellentesque varius. Donec et varius eros, sit amet lobortis odio. Aliquam eget orci ullamcorper, mollis risus in, semper neque. Morbi imperdiet nibh vitae molestie feugiat. Curabitur ut magna suscipit, fermentum elit eget, tincidunt ligula. Aenean tincidunt mattis turpis, eu cursus augue. p> Vestibulum quis porttitor sapien, vitae imperdiet felis. Phasellus eu quam dui. Ut sem orci, aliquam non scelerisque vel, dapibus sed magna. Phasellus cursus, sem viverra tempor congue, velit velit tempus lectus, nec eleifend libero erat sit amet risus. Morbi in egestas ante. Ut id euismod lectus. Cras sit amet nulla magna. Nulla at nisl sit amet lacus imperdiet fermentum. Suspendisse vitae egestas lacus, a accumsan ante. Cras at laoreet mauris, vitae laoreet diam. Praesent vulputate tortor et ante ultricies, at tristique metus cursus.  footer>    

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> body !-- w w w. de m o 2 s . c o m --> background-color: white; > header < position: fixed; top: 0; left: 0; right: 0; height: 50px; background-color: white; > section < padding: 50px 0; background-color: #7fff7f; margin: 0 50px; > footer < position: fixed; bottom: 0; left: 0; right: 0; height: 50px; background-color: white; >  body> header>Top of the site section> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin quis lorem id facilisis. Nulla sit amet laoreet massa. Aliquam pretium dapibus diam, nec pulvinar lectus finibus et. Integer nec tincidunt tellus. Nullam nec est ornare, rutrum metus sed, cursus augue. Duis sed diam lacinia, lobortis lacus id, auctor est. Nam consequat a dolor et volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus posuere, nulla vel pulvinar venenatis, enim arcu suscipit lorem, vitae viverra lacus tortor eu lacus. Praesent ut volutpat eros. Quisque vel commodo justo, eget vestibulum lorem. p> Praesent quis rutrum erat. Duis ligula magna, sodales vitae cursus vel, vestibulum commodo est. Aenean aliquam imperdiet enim, eu ultricies mi ultrices vestibulum. Mauris a dolor ut nibh dapibus maximus. Fusce suscipit nulla et scelerisque interdum. Praesent sed egestas turpis. Donec nibh lorem, euismod at nisl ac, porta ultrices nibh. Donec ex risus, lobortis quis lectus consectetur, congue ullamcorper lorem. Cras ut rhoncus metus. Curabitur fermentum accumsan pulvinar. Nulla facilisi. Phasellus nec faucibus nulla. Vestibulum orci arcu, aliquet non est nec, fringilla posuere metus. Sed non justo ex. p> Pellentesque eleifend maximus metus, vel varius metus bibendum sit amet. Etiam congue ac orci vel molestie. Sed dignissim arcu id risus condimentum gravida. Donec tempus vel sem in commodo. Sed sed diam sit amet sapien hendrerit porttitor et a risus. Curabitur feugiat, justo vitae molestie hendrerit, dolor nunc eleifend sem, vel dictum dui neque vitae magna. Vestibulum in blandit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. p> Vivamus sagittis porttitor volutpat. Cras ornare turpis at egestas sodales. Fusce ultricies aliquet quam, venenatis pulvinar libero facilisis eu. In tincidunt diam in nisi dictum, in posuere quam vestibulum. Suspendisse varius, purus non mattis efficitur, tellus nulla hendrerit magna, eget interdum mauris velit a ipsum. Nam sollicitudin tristique odio, sed consequat enim fringilla eu. Nam ut sodales elit. Nullam est ante, tempor ac sagittis ac, dignissim et nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra sagittis tellus ac luctus. In a odio et erat pellentesque varius. Donec et varius eros, sit amet lobortis odio. Aliquam eget orci ullamcorper, mollis risus in, semper neque. Morbi imperdiet nibh vitae molestie feugiat. Curabitur ut magna suscipit, fermentum elit eget, tincidunt ligula. Aenean tincidunt mattis turpis, eu cursus augue. p> Vestibulum quis porttitor sapien, vitae imperdiet felis. Phasellus eu quam dui. Ut sem orci, aliquam non scelerisque vel, dapibus sed magna. Phasellus cursus, sem viverra tempor congue, velit velit tempus lectus, nec eleifend libero erat sit amet risus. Morbi in egestas ante. Ut id euismod lectus. Cras sit amet nulla magna. Nulla at nisl sit amet lacus imperdiet fermentum. Suspendisse vitae egestas lacus, a accumsan ante. Cras at laoreet mauris, vitae laoreet diam. Praesent vulputate tortor et ante ultricies, at tristique metus cursus.  footer>    

Related

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник