实现页面横向滚动 && 页面中实现几个模块横向滚动

最新推荐文章于 2024-05-29 15:53:40 发布

风吹麦田的声音

最新推荐文章于 2024-05-29 15:53:40 发布

阅读量417

点赞数 5

分类专栏：原生js js 对象方法文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_45416252/article/details/136345666

版权

js 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

对象方法

7 篇文章 0 订阅

订阅专栏

原生js

3 篇文章 0 订阅

订阅专栏

Screen-2024-02-28-120857

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 40px;
    }

    .container-x {
      position: relative;
      height: 300vw;
    }

    .sticky-content {
      position: sticky;
      top: 0;
      left: 0;

    }

    .scroll-page {
      overflow-y: hidden;
      overflow-x: hidden;
    }

    .section {
      min-width: 100vw;
      height: 100vh;
      flex-shrink: 0;
      position: relative;
    }

    .section1 {
      background-color: red;
    }

    .section2 {
      background-color: blue;
    }

    .section3 {
      background-color: pink;
    }

    .section4 {
      background-color: gold;
    }

    .header {
      height: 200px;
      background-color: aqua;
    }

    .footer {
      height: 300px;
      background-color: aqua;
    }

    .d-flex {
      display: flex;
    }

    .h-full {
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="as-page-container">
    <div class="header as-header">header</div>
    <horizontal-roll>
      <div class="container-x as-container-x">
        <div class="sticky-content">
          <div class="scroll-page d-flex as-scroll-page">
            <div class="section section1 as-section">section1</div>
            <div class="section d-flex section2 as-section">
              <div class="h-full" style="width:100vw;">section2</div>
              <div class="h-full" style="width:680px;">section2</div>
              <div class="h-full" style="width:280px;">section2</div>
            </div>
            <div class="section section3 as-section">section3</div>
            <div class="section section4 as-section">section4</div>
          </div>
        </div>
      </div>
    </horizontal-roll>
    <div class="footer">footer</div>
  </div>

</body>
<script>
  class HorizontalRoll extends HTMLElement {
    constructor() {
      super()
      this.$setions = this.querySelectorAll('.as-section')
      this.$containerX = this.querySelector('.as-container-x')
      this.$scrollPage = this.querySelector('.as-scroll-page')
      if (!this.$setions.length || !this.$containerX || !this.$scrollPage) return
      this.headerHeight = this.getHeaderHeight()
      this.init()
    }

    init() {
      this.setContainerXHeight()
      this.listenScrollPage()
      window.addEventListener('scroll', () => {
        this.listenScrollPage()
      })
    }

    listenScrollPage() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop,
        scrollLeft = 0
      if (scrollTop > this.headerHeight) scrollLeft = scrollTop - this.headerHeight
      this.$scrollPage.scrollLeft = scrollLeft
    }

    setContainerXHeight() {
      let totalHeight = 0;
      [...this.$setions].map(element => {
        totalHeight = totalHeight + element.offsetWidth
      })
      totalHeight = totalHeight - window.innerWidth + window.innerHeight
      this.$containerX.style.height = `${totalHeight}px`
    }

    getHeaderHeight() {
      const el = document.querySelector('.as-header')
      if (el) return el.clientHeight
      else return 0
    }
  }

  if (customElements.get('horizontal-roll') === undefined) {
    customElements.define('horizontal-roll', HorizontalRoll)
  }
</script>

</html>