我正在为平面设计师创建一个网站。 我需要创建一个响应式 slider ,当您单击图形时它会出现在固定位置。 因此,单击时,会打开一个 div 并出现 slider 。 在我的 JS 代码中,我使用图像必须出现的数据进行搜索,因此我定义了 slider 的大小并启动它。 唯一的问题是当手机处于横向模式时,我无法在 slider 上滚动。
我尝试了几种方法 "overview-y: scroll", "min-height: 100%", "max-height: 100%”,我什至尝试使用媒体查询“orientation: landscape”
我给你一些代码并给你留下问题网站的链接。
function reset() {
$('.slider_list').empty();
$('.slider ul').css({
marginLeft: 0,
left: 0,
width: 0,
height: 0,
});
$('.slider_content').css({
width: 0,
height: 0
});
$('.toLeft').css('visibility', 'visible');
$('.slider_navigation').css('display', 'flex');
}
$(".work_figure").click(function () {
var objet = {
graphique1: ['https://artfeuille.fr/img/graphisme/slider-graphisme-1a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-1b.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-1c.png'],
graphique2: ['https://artfeuille.fr/img/graphisme/slider-graphisme-2.png'],
graphique3: ['https://artfeuille.fr/img/graphisme/slider-graphisme-3a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-3b.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-3c.png'],
graphique4: ['https://artfeuille.fr/img/graphisme/slider-graphisme-4a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-4b.png'],
graphique5: ['https://artfeuille.fr/img/graphisme/slider-graphisme-5.png'],
graphique6: ['https://artfeuille.fr/img/graphisme/slider-graphisme-6a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-6b.png'],
graphique7: ['https://artfeuille.fr/img/graphisme/slider-graphisme-7.png'],
graphique8: ['https://artfeuille.fr/img/graphisme/slider-graphisme-8.png']
};
reset();
var name = $(this).data("name");
var number = $(this).data("number");
var table = name + number;
var table2 = [];
for (key in objet) {
if (key === table) {
table2 = objet[key];
}
}
indexLenght = table2.length;
for (var i = 0; i < indexLenght; i++) {
$('.slider_list').append('<li class="slider_items"><img src="' + table2[i] + '" alt="Ca fonctionne" class="slider_img" /></li>');
}
$('.slider').css('height', '100%');
var slideCount = $('.slider ul li').length;
var slideWidth = $('.slider ul li img').width();
var slideHeight = $('.slider ul li img').height();
var slideTotalWidth = slideCount * slideWidth;
if (slideCount > 2) {
$('.slider ul li:last-child').prependTo('.slider ul');
$('.slider ul').css('margin-left', -slideWidth);
} else if (slideCount > 1) {
$('.toLeft').css('visibility', 'hidden');
} else {
$('.slider_navigation').css('display', 'none');
}
$('.slider .slider_content').css({
width: slideWidth,
height: slideHeight
});
$('.slider ul').css({
width: slideTotalWidth,
height: slideHeight
});
function nextSlide() {
$('.slider ul').animate({
left: slideWidth
}, 500, function () {
$('.slider ul li:last-child').prependTo('.slider ul');
$('.slider ul').css('left', '');
});
}
function previousSlide() {
$('.slider ul').animate({
left: -slideWidth
}, 500, function () {
$('.slider ul li:first-child').appendTo('.slider ul');
$('.slider ul').css('left', '');
});
}
$(".toLeft").unbind('click').click(function () {
nextSlide();
});
$(".toRight").unbind('click').click(function () {
previousSlide();
});
$(document).on('keydown', function (e) {
var touche = e.keyCode;
if (touche === 39) {
previousSlide();
} else if (touche === 37) {
nextSlide();
}
});
});
$(".slider_close").click(function () {
$('.slider').css('height', '0');
});
/* Slider section */
.slider {
position: fixed;
top: 0%;
bottom: 0%;
left: 0%;
height: 0%;
width: 100%;
background: url('../img/bg_header.png') no-repeat center center fixed;
background-size: cover;
z-index: 99999;
overflow-y: scroll;
transition: all .3s ease-in-out;
}
.slider .container {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
height: 100%;
}
.slider_close {
color: #FFF;
font-size: 30px;
font-family: 'OpenSans SemiBold', sans-serif;
float: right;
margin-bottom: 100px;
}
.slider_content {
overflow: hidden;
margin: 0 auto;
position: relative;
}
.slider_navigation {
position: absolute;
top: 55%;
left: 0;
height: 40px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.icons_slider {
font-size: 50px;
}
.slider_list {
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slider_items {
float: left;
display: block;
position: relative;
}
.slider_list img {
width: 901px;
height: 675px;
}
@media screen and (max-width: 992px) {
.slider_list img {
width: 700px;
height: 525px;
}
}
@media screen and (max-width: 768px) {
.slider_list img {
width: 320px;
height: 240px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Slider section -->
<div class="slider">
<div class="container">
<a href="javascript:void(0)" class="slider_close"><i class="fas fa-times icons_slider"></i></a>
<div class="slider_content">
<ul class="slider_list" id="slide_content">
</ul>
</div>
<nav class="slider_navigation">
<a href="javascript:void(0)" class="toLeft icons_slider"><i class="fas fa-caret-left"></i></a>
<a href="javascript:void(0)" class="toRight icons_slider"><i class="fas fa-caret-right"></i></a>
</nav>
</div>
</div>
我希望你能帮助我。 提前谢谢你,祝你有美好的一天
最佳答案
您似乎无法上下滚动,因为没有可滚动的内容。容器设置为 100%,因为它是一个固定元素,这将是视口(viewport)的 100%——不会更大。没有可滚动到的内容。
例如,如果您将 .container 的大小增加到 120%,您将看到您将能够滚动。
此外,您可能想移除关闭按钮上的边距底部……这会将整个容器向下推。这在移动设备上不是必需的(可能使用媒体查询)
关于javascript - 固定位置 : scrolling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53429854/