更改滾動頁面部分

我想要更改滾動部分，以消除單個頁面網站的溢出並更改滾動時高度爲100％的部分。我嘗試使用：更改滾動頁面部分

https://github.com/hellsan631/angular-fullpage.js

，但不能使它工作。當我遵守所有的指示，我得到了以下錯誤：

Error: [$compile:nonassign] http://errors.angularjs.org/1.6.6/$compile/nonassign?p0=undefined&p1=options&p2=fullPage 

angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined 

angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined

我也使用https://github.com/alvarotrigo/fullPage.js試過了，沒有錯誤，但沒有任何反應。

任何人都有不同的解決方案，或解決這個問題的方法？謝謝。

來源

2017-10-18 Nemanja Grabovac

這裏是一個組隊，探索內容滑動插件，類似fullpage.js：
http://idangero.us/swiper/demos/20-mousewheel-control.html

你可以使用鼠標滾輪，鼠標（桌面觸摸仿真），鍵盤（臺式機），並指（在觸摸設備上滾動它）。另外還有一個非JQuery版本可用。

此外，你甚至可以將其配置爲改變網頁背景顏色，如：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Swiper demo</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css"> 
<style> 
    html, body { 
     position: relative; 
     height: 100%; 
    } 
    body { 
     background: #eee; 
     font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
     font-size: 14px; 
     color:#000; 
     margin: 0; 
     padding: 0; 
    } 
    .swiper-container { 
     width: 100%; 
     height: 100%; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    .swiper-slide { 
     text-align: center; 
     font-size: 18px; 
     background: transparent; 

     /* Center slide text vertically */ 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     -webkit-box-pack: center; 
     -ms-flex-pack: center; 
     -webkit-justify-content: center; 
     justify-content: center; 
     -webkit-box-align: center; 
     -ms-flex-align: center; 
     -webkit-align-items: center; 
     align-items: center; 
    } 

    body { 
     transition: background-color .5s ease-in-out; 
    } 

    body.red { 
     background-color: #f40; 
    } 

    body.orange { 
     background-color: #f90; 
    } 

    body.yellow { 
     background-color: #fe0; 
    } 
    </style> 
</head> 
<body> 

<!-- Slider main container --> 
<div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide" data-bg="red">Slide 1</div> 
     <div class="swiper-slide" data-bg="orange">Slide 2</div> 
     <div class="swiper-slide" data-bg="yellow">Slide 3</div> 
    </div> 
    <div class="swiper-pagination"></div> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script> 
<script> 
var body = document.body; 
body.className = 'red'; 
var slider = new Swiper ('.swiper-container', { 
    pagination: '.swiper-pagination', 
    direction: 'vertical', 
    slidesPerView: 1, 
    paginationClickable: true, 
    spaceBetween: 30, 
    mousewheelControl: true, 
    onSlideChangeStart: function (swiper) { 
     var currentSlide = swiper.slides[ swiper.activeIndex ]; 
     body.className = currentSlide.getAttribute('data-bg'); 
     console.log(currentSlide.getAttribute('data-bg')); 
    }, 
}); 
</script> 
</body> 
</html>

DEMO

來源

2017-10-18 09:44:28

更改滾動頁面部分

回答

相關問題