我注意到了一些有关使用Width以及Width禁用移动设备的fullpage.js的问题。但是，我希望达到相反的效果，因为我想在仅大于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';
}
答案 0 :(得分：0)
您可以使用以下内容替换您的FullPage脚本链接-这应意味着仅在小于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。...哦，不要忘记将文件路径更改为您自己的代码
答案 1 :(得分：0)
好的，所以我找到了解决方案，我将发布答案。 Fullpage.js是一个很棒的插件。 ：）
$(document).ready(function () {
if (!($(window).width() > 600)) {
// window is less 600px
$('#fullpage').fullpage({
//options here
});
} else {
// window more 600px
}
});