js实现全屏滚动上下切换页面效果代码-html代码-BFW代码库

代码语言：html
代码描述：js实现全屏滚动上下切换页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /body,html{margin:0;padding:0;font-family:'roboto'}body{height:100%;width:100%;user-select:none;overflow-y:hidden;touch-action:none;overscroll-behavior-y:contain}h1{font-size:calc(2em+1vw);margin:0;padding:0;text-align:center}p{font-weight:100;font-size:calc(1em+0.5vw);text-align:center}#wholepage{display:block;width:100%;height:100%;position:fixed;overflow:hidden}section,.section{display:flex;flex-direction:row;width:100%;height:100%;overflow:hidden;transform:translate(0,0);transition:transform .4s ease-out;margin:0;padding:0}.page{flex:1 0 100%;display:flex;flex-direction:column;width:100%;height:100%;justify-content:center;align-items:center;transform:translate(0,0);transition:transform .4s ease-out}.sectionButtonContainer{position:fixed;display:flex;flex-direction:column;top:50%;right:3vw;color:#1e1e1e;-webkit-tap-highlight-color:rgba(255,255,255,0)}.sectionButtonContainer label,.page_selection label{display:inline-flex;width:4px;height:4px;border-radius:50%;background:rgb(255,255,255,0.8);transition:transform .2s;margin:12px 12px;padding:0;box-shadow:0 0 8px rgba(0,27,160,0.8);cursor:pointer}.sectionButtonContainer label::after,.page_selection label::after{content:'';display:inline-flex;position:relative;top:-10px;left:-10px;padding:12px}.sectionButtonContainer input[type=radio]:checked+label::after,.page_selection input[type=radio]:checked+label::after{display:none}.sectionButtonContainer input[type=radio]:checked+label,.page_selection input[type=radio]:checked+label{transform:scale(2.2);transition:transform .2s}.page_selection{position:absolute;display:flex;flex-direction:row;bottom:2vh;left:40%;color:#1e1e1e;-webkit-tap-highlight-color:rgba(255,255,255,0);z-index:999999}
    </style>

</head>

<body>

    <div id="wholepage">
        <section>
            <div class="page">
                <h1>This is a first section</h1>
                <p>..and you can slide to the left or down</p>
            </div>
            <div class="page">
                <h1>Hi!This is second page of first section!</h1>
                <p>How are you?</p>
            </div>
            <div class="page">
                <h1>..still first section</h1>
                <p>but 3rd page..</p>
            </div>
        </section>
        <section>
            <div class="page">
                <h1>Oh!You scrolled - nice!</h1>
                <p>you can try even lower..</p>
            </div>
            <div class="page">
                <h1>Nice!</h1>
                <p>This is a second page of 2nd section</p>
            </div>
            <div class="page">
                <h1>You are a brave [wo]man!</h1>
                <p>scroll
                    < back or down.. or up</p>
            </div>
        </section>
        <section>
            <div class="page">
                <h1>You can have as many pages as you want!</h1>
                <p>Nice huh? Try navigation buttons on the left and at the bottom</p>
            </div>
            <div class="page">
                <h1>Sweet!</h1>
                <p>..this is a 2nd page of 3rd section!</p>
            </div>
            <div class="page">
                <h1>You are amazing!</h1>
                <p>..you got this far – you should build this your self!</p>
            </div>
        </section>
    </div>
    <script>
        const WholePageSlider = class {
      constructor (options = {}) {
        this.container = options.containerId ? document.getElementById(options.containerId) : document.body
        this.sections = options.sectionClass ? document.getElementsByClassName(options.sectionClass) : document.getElementsByTagName('section')
        this.pageClass = options.pageClass ? options.pageClass : 'page'
    
        this.pagesPerSection = []
        this.currentPage = []
        this.currentSection = 0
    
        this.isDragging = false
        this.draggingPercent = 20
    
        this.waitAnimation = false
        this.timeToAnimate = 500
        
        this.height = 100
        this.width = 100
    
        this.swipeStartDirection = null
        this.swipeEndDirection = null
        
        this.options = {
          ...options
        }
        this.translate = {
          section: 0,
          page: []
        }
        
        this.touches = {
          startX: null,
          startY: null,
          endX: null,
          endY: null,
          differenceX: null,
          differenceY: null
        }
        
        this.init()
        this.setupEventListeners()
    
      }
    
      init () {
    
        const sectionButtonContainer = this.createElement('div', { className: 'sectionButtonContainer' }, this.container)
    
        // Create elements for every section and apply styles
        for (let index = 0; index < this.sections.length; index++) {
    
          // Count and add page Starting position for every section
          this.translate.page[index] = 0
          this.currentPage[index] = 0
          this.pagesPerSection[index] = this.sections[index].getElementsByClassName(this.pageClass)
          
          // Apply background color for section
          if (this.options.colors) {
            this.sections[index].style.background = this.options.colors[index] ? this.options.colors[index] : 'white'
          }
          
          // We need to be sure that there is more then 1 section before creating navigation
          if (this.sections.length > 1) {
    
            // Create radio button for every section
            const sectionNavigationButton = this.createElement('input', {
              type: 'radio',
              name: 'sectionScrollButton',
              id: `sectionId[${index}]`,
              value: index,
              onclick: function (event) {
    
                if (this.waitAnimation) {
                  return event.preventDefault()
                } else {
                  this.switchAndTranslateSection(event) 
                }
    
              }.bind(this),
              checked: this.currentSection === index,
              style: {
                display: 'none'
              }
            }, sectionButtonContainer)
    
            // Give some custom style for radio buttons with labels
            this.createElement('label', { htmlFor: sectionNavigationButton.id }, sectionButtonContainer)
            
          }
    
          // Create navigation for pages only if there is more than 1 page per section
          if (this.pagesPerSection[index].length > 1) {
            
            const pageButtonContainer = this.createElement('div', { id: `pageButtonContainer[${index}]`, className: 'page_selection' }, this.sections[index])
    
            for (let i = 0; i < this.pagesPerSection[index].length; i++) {
    
              // Create radio button for every page
              this.createElement('input', {
                type: 'radio',
                id: `page[${index}][${i}]`,
                name: `pagination[${index}]`,
                value: i,
                checked: this.currentPage[i] === i,
                onclick: function (event) {
    
                  if (this.waitAnimation) {
                    return event.preventDefault()
                  } else {
                    this.switchAndTranslatePage(event) 
                  }
                
                }.bind(this),
                style: {
                  display: 'none'
                }
              }, pageButtonContainer)
    
              // Give some custom style for radio buttons with labels
              this.createElement('label', { htmlFor: `page[${index}][${i}]` }, pageButtonContainer)
    
            }
            // Align container to center, because we never know how wide container will be after all buttons added 
            pageButtonContainer.style.left = `calc(50% - ${pageButtonContainer.getBoundingClientRect().width / 2}px)`
          }
        }
        // Same thing as pageButtonContainer, but only with height 
        sectionButtonContainer.style.top = `calc(50% - ${sectionButtonContainer.getBoundingClientRect().height / 2}px)`
      }
    
      switchAndTranslateSection (swipeOrClick) {
        // If we have no sections created or have to wait for animation to complete - return
        if (!this.sections || this.sections.length < 1 || this.waitAnimation) {
          return
        } else {
          this.waitAnimation = true
        }
    
        // Handle swipe or click for sections (UP/DOWN)
        if (((swipeOrClick.deltaY > 0 || swipeOrClick === 'down') && this.swipeStartDirection !== 'up') && (this.currentSection < this.sections.length - 1)) {
          this.currentSection++
          this.translate.section -= this.height
        } else
        if (((swipeOrClick.deltaY < 0 || swipeOrClick === 'up') && this.swipeStartDirection !== 'down') && (this.currentSection > 0)) {
          this.currentSection--
          this.translate.section += this.height
        } else  
        if (swipeOrClick.type === 'click') {
          const click = parseInt(swipeOrClick.target.value) - this.curren.........完整代码请登录后点击上方下载按钮下载查看