📌  相关文章
📜  溢出滚动反应本机 - Javascript(1)

📅  最后修改于: 2023-12-03 15:11:08.770000             🧑  作者: Mango

溢出滚动反应本机 - JavaScript

在开发Web应用程序时，我们经常需要在页面上显示大量内容，但是有时它们不适合在一个屏幕上呈现。这时我们需要考虑如何实现内容的滚动效果，以便用户可以浏览全部内容。在本文中，我们将学习如何使用JavaScript实现溢出滚动反应本机的效果。

什么是溢出滚动反应本机？

溢出滚动反应本机是您在页面上有太多内容时，向用户提供本机滚动栏。这样用户就可以在内容区域内水平和垂直滚动浏览所有内容。这是一种非常流行的网页设计技巧，使用户能够更舒适地浏览页面。

如何实现溢出滚动反应本机？

我们可以使用CSS overflow 属性来实现溢出滚动效果。将其设置为“scroll”将根据需要在目标元素周围添加滚动栏。但是，我们还需要一些JavaScript代码，以便在浏览器调整大小或屏幕旋转时自动调整滚动区域大小。

HTML结构

在页面中，我们需要一个可滚动的容器。这可以是<div>元素或其他任何具有overflow: scroll样式的元素。例如：

<div id="scrollable-content">
  <!-- 您的内容在这里 -->
</div>
JavaScript代码

我们需要编写JavaScript代码，以便在页面加载时和在浏览器调整大小或屏幕旋转时调整滚动区域大小。代码可以如下所示：

window.onload = function() {
  reSize();
};

window.onresize = function() {
  reSize();
};

function reSize() {
  var winHeight = window.innerHeight,
      contentHeight = document.getElementById('scrollable-content').offsetHeight;

  if (contentHeight > winHeight) {
    document.body.style.overflow = "hidden";
    document.getElementById('scrollable-content').style.height = winHeight + "px";
  } else {
    document.body.style.overflow = "auto";
    document.getElementById('scrollable-content').style.height = "auto";
  }
}

代码使用window.onload和window.onresize事件监听器来重新调整滚动区域大小。函数reSize检查内容区域高度和窗口高度，并根据需要设置overflow和高度属性。如果内容区域高于窗口高度，则设置overflow为“hidden”，并将滚动区域高度设置为窗口高度。如果内容区域低于窗口高度，则还原overflow和高度属性。

完整示例

下面是完整的HTML和JavaScript代码示例，演示了如何实现溢出滚动反应本机。

<!DOCTYPE html>
<html>
<head>
  <title>Overflow Scroll Responsive Native - JavaScript</title>
  <style>
    /* 滚动区域的样式 */
    #scrollable-content {
      width: 100%;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div id="scrollable-content">
    <!-- 您的内容在这里 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ex quam, convallis in consequat in, luctus posuere odio. Nullam et finibus urna. Pellentesque tristique, dolor eu sodales facilisis, erat enim bibendum dolor, quis tempus leo turpis at massa. Mauris enim odio, molestie vel rhoncus vitae, posuere quis ipsum.</p>
  </div>

  <script>
    window.onload = function() {
      reSize();
    };

    window.onresize = function() {
      reSize();
    };

    function reSize() {
      var winHeight = window.innerHeight,
          contentHeight = document.getElementById('scrollable-content').offsetHeight;

      if (contentHeight > winHeight) {
        document.body.style.overflow = "hidden";
        document.getElementById('scrollable-content').style.height = winHeight + "px";
      } else {
        document.body.style.overflow = "auto";
        document.getElementById('scrollable-content').style.height = "auto";
      }
    }
  </script>
</body>
</html>

以上便是实现溢出滚动反应本机的JavaScript代码，效果如下：

效果图