Переполнение скрыто не скрывает полосу прокрутки для iframe

Question

Я хочу скрыть полосу прокрутки в iframe, сохранив функцию прокрутки в iframe.Я попытался использовать стиль overflow:hidden для родительского элемента div и контейнера`, встроенный и из таблицы стилей (как предложено в this и этот ответ ), но безрезультатно, поскольку полоса прокрутки остается и обеспечивает ужасный пользовательский опыт, поскольку страница будет иметь две полосы прокрутки.Я тестировал с использованием Chrome и Firefox, но проблема присутствует в обоих браузерах.

Вот что у меня есть:

.iframeParent {
  height: 4500px;
  position: relative;
  width: 100%;
}

<div class="iframeParent">
  <iframe class="iframeTag" src="www.example.com" frameborder="0"></iframe>
</div>

И scrolling=no не вариант, так как я все еще хочу иметь возможность прокручивать внутри iframe.

Возможно ли вообщедобиться этого, используя только CSS или я должен обратиться к JavaScript?

Answer 1

Это может быть тем, что вы хотите: визуально скрыть полосу прокрутки, но функциональность прокрутки сохраняется

.iframeParent {
  width: 200px;
  height: 120px;
  overflow: auto;
}
.iframeParent::-webkit-scrollbar {
  background-color: #fff;
}

.iframeParent iframe {
  width: 650px;
  height: 294px;
}

<div class="iframeParent">
  <iframe class="iframeTag" src="www.example.com" frameborder="0"></iframe>
</div>