与其埋怨自己，不如指责他人 2022-09-25 19:22 采纳率: 60%
浏览 30
已结题

iframe滚动条怎么隐藏

这个滚动条有没有啥办法隐藏掉，滚动条隐藏了但要内容可以滚动的那种，用的iframe标签

  • 写回答

2条回答 默认 最新

  • MAXLZ 2022-09-25 19:54
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      width: 500px;
      height: 500px;
      overflow: hidden;
    }
    
    iframe {
      border: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <iframe id="iframe" src="https://www.csdn.net/"></iframe>
  </div>
<script>
  // 获取滚动条宽度
  function getScrollbarWidth() {
    const outer = document.createElement('div');
    outer.style.visibility = 'hidden';
    outer.style.overflow = 'scroll';
    outer.style.msOverflowStyle = 'scrollbar';
    document.body.appendChild(outer);
    
    const inner = document.createElement('div');
    outer.appendChild(inner);
    
    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
    
    outer.parentNode.removeChild(outer);
    
    return scrollbarWidth;
  }
  const scrollWidth = getScrollbarWidth()
  
  const iframe = document.querySelector('#iframe')
  // 使iframe宽高多加一个滚动条的宽度
  iframe.style.width = `calc(100% + ${scrollWidth}px)`
  iframe.style.height = `calc(100% + ${scrollWidth}px)`
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月16日
  • 已采纳回答 10月8日
  • 创建了问题 9月25日