Как удалить горизонтальную полосу прокрутки и изменить css вертикальной полосы прокрутки?
13 ответы
Добавить scrolling=»no» атрибут iframe.
можно сделать это с помощью css? — Эворлор
Да, но тогда в Chrome нельзя использовать scrollIntoView. Видеть code.google.com/p/chromium/issues/detail?id=137214 — Питер Бранд
ну, это скрывает полосу прокрутки содержимого и предотвращает прокрутку содержимого. это не предотвращает появление полосы прокрутки iframe. — Дэйв Кузино
Атрибут прокрутки в iframe теперь официально устарел. Вместо этого следует использовать CSS. — Майк Пул
@MikePoole Это могло быть официально устаревшим, но это не помогло установить overflow:hidden; в Chrome 65.0.3325.181, но scrolling=»no» помогло. — некоторые
Это работает во всех браузерах
ответ дан 25 мар ’21, в 05:03
Добавление scroll=»no» и style=»overflow:hidden» на iframe не работал, мне пришлось добавить style=»overflow:hidden» в теле html-документа, загруженного внутри iframe.
Если это поможет, в Firefox есть проблема, когда если у вас есть элемент CSS transform: scale(0.7) или что-то подобное, это создаст полосы прокрутки (которые будут отображаться в вашем iFrame), если вы не обрежете их с помощью overflow: hidden; на предке (может быть div вместо тела). — ПризракКенни
Это потому, что это «прокрутка = нет», а не «прокрутка = нет». — Брайан Грин
Вы имеете в виду, что загружены внутри нашего загруженного вокруг? Что вокруг чего? — Жоао Пиментел Феррейра
загружен внутри где test.html имеет этот параметр. — нирвана74в
Попробуйте добавить scrolling=»no» атрибут, как показано ниже:
Просто добавь scrolling=»no» и seamless=»seamless» атрибуты для тега iframe. нравится:-
seamless атрибут был удален во всех основных браузерах
Вы должны использовать css вместо бесшовного атрибута. — Нима Рахбар
@NimaRahbar Атрибут бесшовные может быть устаревшим, но css не поддерживает параметры iframe. — Заброшенная Корзина
Если у кого-то здесь есть проблема с отключением полос прокрутки на iframe , это может быть потому, что в содержимом iframe есть полосы прокрутки на элементах ниже что собой представляет html элемент!
Некоторые макеты установлены html и body до 100% высоты и используйте #wrapper div с overflow: auto; (или scroll ), тем самым перемещая прокрутку в #wrapper элемент.
В таком случае ничто из того, что вы делаете, не предотвратит появление полос прокрутки, кроме редактирования содержимого другой страницы.
Создан 25 сен.
KnightFury
seamless атрибут недействителен HTML5, не поддерживается большинством браузеров (caniuse.com/#search=бесшовный), и большая часть других стилей не нужна. - Пере
Добавьте это в свой CSS, чтобы скрыть обе полосы прокрутки
iframe
Спасибо, но только горизонтальная прокрутка и все еще отображается в Firefox. Не отображается ни в Chrome, ни в IE. Кроме того, CSS для полосы прокрутки эффективно применяется только в IE, а не в FF или Chrome (последний показывает бежевый цвет/оттенки по умолчанию). - Вера в невидимые вещи
Это не сработает, потому что переполнение происходит в документе iframe, который вы, как правило, не сможете изменить из-за междоменных ограничений безопасности iframe. - тодоан
Это не работает, так как это не повлияет на содержимое iframe, а только на сам iframe. Решение - прокрутка = "нет". - ЛД
Это неправильный ответ, не удаляет полосы прокрутки в Google Chrome, но scrolling = "no" удаляет. - Андерс Линден
@LarsVandeDonk Ваш ответ должен быть правильным. - Вонг Цзя Хау
Таким образом вы увеличиваете ширину iframe больше, чем должно быть. Затем вы скрываете горизонтальную полосу прокрутки с помощью overflow-x: hidden.
Добавьте это в свой css, чтобы скрыть только горизонтальную полосу прокрутки.
Это последнее средство, но стоит упомянуть:
Вы можете использовать ::-webkit-scrollbar псевдоэлемент в родительском элементе iframe, чтобы избавиться от знаменитых полос прокрутки 90-х.
Редактировать: хотя это относительно поддержанный, ::-webkit-scrollbar может не подходить для всех браузеров. используйте с осторожностью 🙂
Learn how to prevent the user from scrolling the content of an iframe by adding these two attributes to your iframe tag.
I bet you’re reading this because, for the past you-say-how-many-minutes, you’ve been trying to figure out how on earth to disable scrolling on an iframe.
This is a good question and, as you’ve probably experienced firsthand, a tough one to solve.
An provides you with an easy way to embed third-party content on a web page. However, if you’re embedding content from a domain different than your own (which is usually the case), you can’t style that content because of Cross-Origin Resource Sharing (CORS) restrictions.
This leads to quite a few “How do I do this or that with an iframe?” dilemmas. How to prevent scrolling in an iframe, the dilemma you came here to get help with, is by far one of the most common one of them.
So let’s get into it and help you solve it.
How to Disable Scrolling on an
Add the scrolling="no" attribute to the element to prevent users from scrolling on an iframe, both horizontally and vertically.
Although the W3C Validator reports the scrolling="no" attribute as obsolete and recommends using CSS instead, this is still the solution that can help you disable scrolling on most browsers.
Just in case a future version of a popular browser drops support for the scrolling="no" attribute, you may want to add an overflow: hidden CSS declaration to your element’s style attribute, too.
As you look for solutions for this problem on the Internet, you will come across some people recommending the use of the seamless attribute.
That attribute, however, has been dropped from the HTML5 specification and is no longer supported by web browsers, so there’s no sense in adding it to your HTML markup as the only thing you will be adding to your code is bloat.
In Conclusion
Now you know how to disable scrolling on an by adding the scrolling="no" and style="overflow:hidden" attributes to the HTML markup.
If the above solution doesn’t remove the scrollbar from your iframe, then the scrollbar is probably coming from the embedded document, and not the element in your document.
And in such a case, the only solution is to edit the CSS of the embedded document if you can.
By Dim Nikov
Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.
Leave a comment Cancel reply
How to Wait for an Element to Exist in JavaScript July 13, 2023
How to Check If a Function Exists in JavaScript July 13, 2023
How to Remove Numbers From a String With RegEx July 13, 2023
How to Check If a String Is a Number in JavaScript July 13, 2023
How to Insert a Variable Into a String in PHP July 12, 2023
We publish growth advice, technology how-to’s, and reviews of the best products for entrepreneurs, creators, and creatives who want to write their own story.
Maker's Aid is a participant in the Amazon Associates, Impact.com, and ShareASale affiliate advertising programs.
These programs provide means for websites to earn commissions by linking to products. As a member, we earn commissions on qualified purchases made through our links.
To provide the best experiences, we and our partners use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us and our partners to process personal data such as browsing behavior or unique IDs on this site and show (non-) personalized ads. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Click below to consent to the above or make granular choices. Your choices will be applied to this site only. You can change your settings at any time, including withdrawing your consent, by using the toggles on the Cookie Policy, or by clicking on the manage consent button at the bottom of the screen.
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Я попытался с вашим кодом, и он работает нормально без прокрутки. Просьба проверить, находится ли iframe под любым div.
10 ответов
К сожалению, я не верю, что это возможно в полном соответствии HTML5 только с HTML и CSS свойствами. К счастью, большинство браузеров все еще поддерживают свойство scrolling (которое было удалено из спецификации HTML5).
overflow не является решением для HTML5, поскольку единственным современным браузером, который ошибочно поддерживает это, является Firefox.
Текущее решение было бы объединить два:
Но это может оказаться устаревшим по мере обновления браузеров. Вы можете проверить это для решения JavaScript: http://www.christersvensson.com/html-tool/iframe.htm
Изменить: я проверил и scrolling="no" будет работать в IE10, Chrome 25 и Opera 12.12.
Атрибут прокрутки
@LinusAn это то, что говорится в первой строке моего ответа. Однако проблема заключается в том, что браузеры не могут просто полностью удалить его, так как это сломает веб-сайты HTML4, поэтому атрибут scrolling по-прежнему является жизнеспособным, хотя и недопустимым вариантом.
Это правильно, но в Chrome это нарушает scrollIntoView для элементов внутри iframe. См. Code.google.com/p/chromium/issues/detail?id=137214.
@Linus - к сожалению, это не должно работать, и любые браузеры, в которых он работает, несовместимы: переполнение не должно применяться к замененным элементам, таким как кнопки, элементы формы и фреймы.
@DaniSpringer Это решение ПРЕДЛАГАЕТСЯ вырезать контент. Загрузка iframe без возможности прокрутки не приводит к автоматическому изменению размера всей дочерней страницы в соответствии с указанными размерами iframe.
@DaniSpringer Если вы хотите, чтобы iframe сократился до миниатюры, я предлагаю вам использовать CSS3-преобразование ( w3schools.com/cssref/css3_pr_transform.asp ). Рабочий пример: codepen.io/progidy/pen/pgqzgM
@DaniSpringer Насколько я понимаю, у вас есть 3 варианта для iframe: 1) показывать iframe при 100% увеличении, но переполнение может прокручиваться; 2) показывать iframe при 100% увеличении, но предотвращать прокрутку; 3) показать iframe, увеличенный, чтобы полностью поместиться в кадре. Вы отказались от всех 3. Можете ли вы описать, что вы пытаетесь сделать? Если вы заставляете высоту страницы кадрировать без прокрутки, вы должны обрезать ее. Если нет обрезки и нет уменьшения, то _____.
@Nate извините, если мне было неясно. Я бы хотел, чтобы страница растягивалась, чтобы кадр подходил. Нет прокрутки. Нет пореза.
