Question

我的代码很低，每次出现内部滚动条时，它们都不是浏览器的滚动条。问题是，如果浏览器的窗口太小，则用户将无法访问所有菜单元素。是否有一种方法在需要时仅具有浏览器的滚动条？是的，我知道函数中的代码可以处理内部滚动条，但是该怎么解决我的问题呢？

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
      html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }           
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>     
      $(function () {
        const estimatedScrollbarWidth = 30
        $(".content").height($(window).height() - estimatedScrollbarWidth);       
        $(window).resize(function(){
          $(".content").height($(window).height() - estimatedScrollbarWidth);         
        });
      });     

      function showPage(id) {
        switch (id) {
          case "1":           
            $(".content").html('<object data="https://www.purebasic.com">');
            break;
          case "2":
            $(".content").html('<object data="https://www.purebasic.fr/english/">');
            break;
          case "3":
            $(".content").html('<object data="http://www.purearea.net/">');                       
            break;           
          case "4":           
            $(".content").html('<object data="https://en.wikipedia.org/wiki/PureBasic">');           
            break;
        }
        $(".content object").css({width: '100%', height: '100%', overflow: 'auto'});
      }     
    </script>
    <meta charset="ISO-8859-7">
  </head>
  <body>
    <div class="menu">
      <ul>
        <li><a href="#" id="1" onclick="showPage(this.id)">PureBasic</a></li>
        <li><a href="#" id="2" onclick="showPage(this.id)">PureBasic Forum</a></li>
        <li><a href="#" id="3" onclick="showPage(this.id)">PureArea</a></li>
        <li><a href="#" id="4" onclick="showPage(this.id)">Wikipedia</a></li>
        <li><a href="#" id="5" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="6" onclick="showPage(this.id)">Blank</a></li>       
        <li><a href="#" id="7" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="8" onclick="showPage(this.id)">Blank</a></li>       
      </ul>
    </div>
    <div class="content">
    </div>
  </body>
</html>

Answer 1

您只需要清除代码并说明菜单高度：

$(function () {
  updateHeight();
  $(window).resize(updateHeight);
  $(".menu a").click(function(){ showPage($(this).parent().index()+1+"") });
});

function updateHeight() {
  const estimatedHeight = $(window).height() - $(".menu").height() - 30;
  $(".content").height(estimatedHeight);
}

function showPage(id) {
  switch (id) {
    case "1": $(".content").html('<object data="https://www.purebasic.com">'); break;
    case "2": $(".content").html('<object data="https://www.purebasic.fr/english/">'); break;
    case "3": $(".content").html('<object data="http://www.purearea.net/">'); break;           
    case "4": $(".content").html('<object data="https://en.wikipedia.org/wiki/PureBasic">'); break;
  }
}

body {
  padding: 0;
  margin: 0;
}
.content object {
  width: 100%;
  height: 100%;
}

html文件中的内部滚动条出现问题

1 个答案: