javascript - Scrollify 滚动元素

Question

我有 3 Scrollify部分。我希望第三部分可以滚动。

文档列出了这个方法:

standardScrollElements

“一个 CSS 选择器，用于需要标准滚动行为的部分中的元素。”

这是我的 JS

$.scrollify({
  section : ".section",
  sectionName : "section-name",
  interstitialSection : "",
  easing: "easeOutCubic",
  scrollSpeed: 2000,
  offset : 0,
  scrollbars: false,
  standardScrollElements: ".third",
  setHeights: true,
  overflowScroll: true,
  updateHash: true,
  touchScroll: true,
});

但出于某种原因，它不会滚动，也不会让我从第三部分向后滚动。

这是我损坏的演示:

CODEPEN DEMO

有什么想法吗？

Answer 1

您需要将滚动条设置为true。

$.scrollify({
  section: ".section",
  sectionName: "section-name",
  interstitialSection: "",
  easing: "easeOutCubic",
  scrollSpeed: 2000,
  offset: 0,
  scrollbars: true,
  standardScrollElements: "",
  setHeights: true,
  overflowScroll: true,
  updateHash: true,
  touchScroll: true,
});

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.section {
  color: #fff;
}

.first {
  font-size: 2em;
  background: #cd3;
}

.second {
  font-size: 2em;
  background: #3cd;
}

.third {
  height: auto;
  background: #f66;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.11/jquery.scrollify.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" charset="utf-8"></script>
<div class="section first">SCROLL DOWN</div>
<div class="section second">SCROLL DOWN</div>
<div class="section third">
  <p>User experience iPad android value proposition creative ecosystem partner network scrum project. Stock branding long tail agile development business-to-business. Seed money return on investment seed round handshake. User experience hypotheses growth
    hacking virality responsive web design marketing customer termsheet business-to-consumer. Innovator gamification iPad sales MVP branding monetization virality. User experience return on investment iPhone business plan stock gen-z. Infographic social
    media creative strategy low hanging fruit release founders gamification early adopters ecosystem seed money launch party mass market stock. Accelerator android growth hacking sales first mover advantage pitch seed money niche market beta focus funding.
    User experience accelerator funding analytics low hanging fruit return on investment branding backing growth hacking creative iPhone monetization. Pivot growth hacking scrum project supply chain deployment social media handshake direct mailing strategy
    assets.
  </p>
  <p>Agile development entrepreneur infographic customer mass market business model canvas disruptive buzz lean startup facebook business-to-business founders investor partnership. Return on investment social media beta backing MVP innovator iPhone partner
    network freemium long tail deployment. Client mass market prototype. Seed money business plan ownership success conversion infrastructure backing disruptive user experience business-to-business. Metrics monetization pivot lean startup leverage series
    A financing. Low hanging fruit social proof angel investor sales innovator agile development lean startup gamification gen-z paradigm shift incubator. Series A financing learning curve burn rate business plan customer long tail prototype iPhone interaction
    design mass market MVP equity crowdfunding holy grail. Metrics buzz validation alpha branding. Entrepreneur startup direct mailing beta network effects partner network infrastructure market research &amp; development non-disclosure agreement rockstar.
    Buzz responsive web design virality vesting period ownership client lean startup market freemium facebook user experience infographic business model canvas iteration. Disruptive pivot stealth marketing burn rate. Market social media startup direct
    mailing iteration strategy value proposition termsheet stock angel investor release disruptive. Beta pivot iPad stock. Hackathon facebook buyer holy grail pitch buzz value proposition business plan bootstrapping. Marketing first mover advantage MVP
    product management direct mailing growth hacking buzz social proof gen-z business model canvas. Success client innovator monetization return on investment series A financing influencer partnership seed money. Product management interaction design
    burn rate A/B testing stock startup pivot. Bandwidth client pitch low hanging fruit burn rate alpha user experience. Business-to-business responsive web design gen-z agile development partnership hackathon network effects metrics innovator success
    business model canvas. Beta niche market android network effects monetization incubator direct mailing low hanging fruit business model canvas. Release research &amp; development disruptive customer technology founders user experience paradigm shift.
    Burn rate business plan iPad leverage metrics long tail. Direct mailing assets client burn rate bandwidth business plan. Founders buzz responsive web design A/B testing ownership strategy virality agile development. Crowdfunding sales accelerator
    venture business-to-consumer success investor deployment agile development stock network effects gen-z crowdsource burn rate. Termsheet mass market lean startup research &amp; development iPad advisor twitter growth hacking pivot market social proof
    facebook angel investor first mover advantage. Burn rate accelerator series A financing. Scrum project handshake pitch buyer. Advisor churn rate venture business-to-business alpha user experience backing. Ecosystem marketing sales. Return on investment
    hackathon ramen market scrum project infrastructure handshake leverage rockstar long tail seed round influencer buyer. Iteration equity founders business-to-consumer seed money pivot startup marketing strategy validation. Innovator early adopters
    advisor backing A/B testing MVP hypotheses low hanging fruit user experience focus pitch business model canvas. Customer network effects strategy market supply chain long tail paradigm shift founders client sales value proposition innovator. Advisor
    monetization series A financing. A/B testing launch party burn rate client partnership first mover advantage equity freemium bootstrapping stock. Iteration iPad series A financing. Stock network effects focus virality termsheet ownership stealth sales
    gen-z buzz traction deployment investor iPad. Crowdsource rockstar startup bandwidth customer learning curve equity beta business-to-consumer partnership product management iPad. Agile development funding investor venture iPad business-to-consumer
    early adopters supply chain focus freemium social media lean startup. Are you running a startup and want to attract new clients? Tweet, +1 or like us! We'll pick a startup weekly and put your URL in the startupsum text generator! Not launched yet
    and looking for excellent, unlimited hosting? Be sure to check out hostbeats.com (affilate partner).</p>
</div>