在大屏幕上禁用 Fullpage.js

Question

我注意到一些关于禁用 fullpage.js 移动设备使用 responsiveWidth 和 responsiveHeight 的问题。但是，我希望达到相反的效果，因为我只想在大于 600 像素的屏幕上禁用 fullpage.js。有解决办法吗？到目前为止，我已经在此处包含了 jsfiddle。我非常感谢任何建议。谢谢。 :)

enter code here <div id="fullpage">

<div class="section">
</div>

<div class="section">
  <div id="carousel" class="snap">
    <div class="trail-card-snap">
      <div class="trails-card trails-bg-one">
        <div class="trails-card-content">
          <p>Card One</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-two">
        <div class="trails-card-content">
          <p>Card Two</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-three">
        <div class="trails-card-content">
          <p>Card Three</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-four">
        <div class="trails-card-content">
          <p>Card Four</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-five">
        <div class="trails-card-content">
          <p>Card Five</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-six">
        <div class="trails-card-content">
          <p>Card Six</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-seven">
        <div class="trails-card-content">
          <p>Card Seven</p>
        </div>
      </div>
    </div>

    <div class="trail-card-snap">
      <div class="trails-card trails-bg-eight">
        <div class="trails-card-content">
          <p>Card Eight</p>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

html,body{
height: 100%;
width: 100%;
}

@media (max-width: 600px) {
#fullpage {
height: 100%;
}
.section {
height: 50%;
}
}

@media (min-width: 601px) {
#fullpage {
height: 100%;
}
.section {
height: 100%;
}

}


@media (max-width: 600px) {
/*Horizontal Scroll*/
#carousel {
/* Ensure that the contents flow horizontally */
overflow-x: auto;
white-space: nowrap;
display: flex;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 370px;
margin: 0 auto;
margin-top: -50%;
}

#carousel::-webkit-scrollbar {
width: 0px;
background: transparent;
display: none;
}

#carousel.vertical {
flex-direction: column;
}

/* 2018 spec - For Safari 11, Chrome 69+ */
#carousel.snap {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Needed to work on iOS Safari */
margin-top: -50%;
}

#carousel.snap::-webkit-scrollbar {
width: 0px;
/* Remove scrollbar space */
background: transparent;
display: none;
}

#carousel.snap > .randomcard {
scroll-snap-align: center;
-webkit-overflow-scrolling: touch;
}

#carousel.snap::-webkit-scrollbar {
width: 0px;
/* Remove scrollbar space */
background: transparent;
display: none;
}

#carousel.snap.vertical {
flex-direction: column;
scroll-snap-type: y mandatory;
}

/* 2015 spec - For Firefox, Edge, IE */
#carousel.snap {
scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
-ms-scroll-snap-points-x: repeat(100%);
-webkit-overflow-scrolling: touch;
margin-top: -50%;
}

#carousel .snap.kids-cards {
scroll-snap-type: mandatory;
-ms-scroll-snap-type: mandatory;
scroll-snap-points-x: repeat(100%);
-ms-scroll-snap-points-x: repeat(100%);
-webkit-overflow-scrolling: touch;
}

#carousel.snap.vertical {
scroll-snap-points-x: initial;
-ms-scroll-snap-points-x: initial;
scroll-snap-points-y: repeat(100%);
-ms-scroll-snap-points-y: repeat(100%);
}
}

@media (max-width: 600px) {
#carousel > .trail-card-snap {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
-webkit-overflow-scrolling: touch;
}

#carousel > .trail-card-snap::-webkit-scrollbar {
width: 0px;
background: transparent;
display: none;
}

#carousel.snap > .trail-card-snap {
scroll-snap-align: center;
-webkit-overflow-scrolling: touch;
}
}

@media (max-width: 600px) {
.trails-card-content p {
color: rgb(190, 0, 207);
text-align: left;
font-size: 16px;
font-size: 2em;
font-weight: 700;
}

.trails-card {
border-radius: 0.8rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: 10%;
margin-left: 10px;
margin-right: 10px;
height: 500px;
width: 380px;
}

.trails-bg-one {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-two {
background: url("img/TrailTile-3.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-three {
background: url("img/TrailTile-4.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-four {
background: url("img/TrailTile-3.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-five {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-six {
 background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-seven {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
background-size: cover;
}

.trails-bg-eight {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
background-size: cover;
}

#trails-event-image {
margin: 0 auto;
width: 100%;
height: auto;
max-width: 330px;
padding-top: 20px;
padding-bottom: 20px;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.19), 0 0px          
0px rgba(0, 0, 0, 0.23);
}
}

/*Desktop / Tablet*/

@media (min-width: 601px) {
#carousel {
display: grid;
max-width: 100%;
margin: 0 auto;
grid-gap: 1rem;
 grid-template-columns: repeat(auto-fit,           
 minmax(300px, 1fr));
grid-auto-rows: minmax(150px, auto);
margin-top: -30%;


}
.trails-card {
max-width: 100%;
border-radius: 5px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
transition: all 0.3s;
}
.trails-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
}
.trails-card img {
width: 100%;
object-fit: cover;
}

.trails-card {
border-radius: 0.25rem;
box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
display: inline-block;
overflow: hidden;
width: 100%;
max-width: 350px;
}

.trails-bg-one {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-two {
background: url("img/TrailTile-3.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-three {
background: url("img/TrailTile-4.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-four {
background: url("img/TrailTile-3.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-five {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-six {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-seven {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-bg-eight {
background: url("img/TrailTile-1.png");
background-repeat: no-repeat;
width: 100%;
max-width: 350px;
height: 350px;
}

.trails-card-content {
  padding: 1rem;
}

.trails-card-content p {
  color: rgb(190, 0, 207);
text-align: left;
font-size: 16px;
font-size: 2em;
font-weight: 700;
 }
 }



enter code here<script>
$(document).ready(function () {
  $('#fullpage').fullpage({
    //options here
  });

  //methods
});
</script>


 <script>
 function toggleSnap() {
   var snapEnabled =         document.getElementById('carousel').classList.toggle('sn.ap');
  //document.getElementById('otherSnappingState').innerText = //snapEnabled ? 'off' : 'on';
}

Answer 1

您可以将整页脚本 link 替换为以下内容 - 这应该意味着整页只会加载小于 600 像素的尺寸。

<script>
if (screen && screen.width < 600) {
document.write('<script type="text/javascript" src="http://your-file-path/fullpage.js"><\/script>');
}
</script>

您可以根据您的要求将号码 (600) 更改为 768 或 991 和条件....哦，别忘了将文件路径更改为您自己的代码

Answer 2

好的，所以我找到了解决方案，我会 post 我的答案。 Fullpage.js 是一个很棒的插件。 :)

$(document).ready(function () {
  if (!($(window).width() > 600)) {
    // window is less 600px
    $('#fullpage').fullpage({
        //options here
      });
  } else {
    // window more 600px
  }
});

在大屏幕上禁用 Fullpage.js

Disable Fullpage.js on larger screens

html

javascript

css

jquery

fullpage.js