Javascript 位置固定：滚动

我正在为一位平面设计师创建一个网站。 我需要创建一个响应滑块，当你点击一个图形时，它会显示在一个固定的位置。 因此，单击时，将打开一个div并显示滑块。 在我的JS代码中，我使用数据搜索必须显示的图像，以便定义滑块的大小并启动它。 唯一的问题是，当手机处于横向模式时，我无法滚动滑块。

我尝试了几种方法“概览-y:滚动”、“最小高度：100%”、“最大高度：100%”，我甚至尝试了媒体查询“方向：横向”

我给你写了一些代码，给你留下了有问题的网站的链接

函数重置（）{
$（'.slider_list'）.empty（）；
$（'.ul'）.css({
marginLeft:0，
左:0,，
宽度：0，
高度:0,，
});
$（'.slider_content'）.css({
宽度：0，
身高：0
});
$（'.toLeft'）.css（'visibility'，'visible'）；
$（'.slider_navigation'）.css（'display'，'flex'）；
}
$（“.work\u figure”）。单击（函数（）{
var objet={
图1:['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'],
图2:['https://artfeuille.fr/img/graphisme/slider-graphisme-2.png'],
图3:['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'],
图4:['https://artfeuille.fr/img/graphisme/slider-graphisme-4a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-4b.png'],
图5:['https://artfeuille.fr/img/graphisme/slider-graphisme-5.png'],
图6:['https://artfeuille.fr/img/graphisme/slider-graphisme-6a.png', 'https://artfeuille.fr/img/graphisme/slider-graphisme-6b.png'],
图7:['https://artfeuille.fr/img/graphisme/slider-graphisme-7.png'],
图8:['https://artfeuille.fr/img/graphisme/slider-graphisme-8.png']
};
重置（）；
变量名称=$（this）.data（“名称”）；
变量编号=$（此）.data（“编号”）；
变量表=名称+编号；
var表2=[]；
用于（输入objet）{
如果（键===表）{
表2=对象[键]；
}
}
indexLenght=表2.长度；
对于（变量i=0；i）；
}
$（'.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；
如果（滑动计数>2）{
$（'.slider ul li:last child'）.prependTo（'.slider ul'）；
$（'.slider ul'）.css（'margin-left'，-slideWidth）；
}否则如果（slideCount>1）{
$（'.toLeft'）.css（'visibility'，'hidden'）；
}否则{
$（'.slider_navigation'）.css（'display'，'none'）；
}
$（'.slider.slider_content'）.css({
宽度：滑动宽度，
高度：滑块高度
});
$（'.ul'）.css({
宽度：slideTotalWidth，
高度：滑块高度
});
函数nextSlide（）{
$（'.slider ul'）。设置动画({
左：滑动方向
}，500，函数（）{
$（'.slider ul li:last child'）.prependTo（'.slider ul'）；
$（'.slider ul'）.css（'左'，''）；
});
}
函数previousSlide（）{
$（'.slider ul'）。设置动画({
左：-滑动方向
}，500，函数（）{
$（'.slider ul li:first child'）。追加（'.slider ul'）；
$（'.slider ul'）.css（'左'，''）；
});
}
$（“.toLeft”）。取消绑定（'click'）。单击（函数（）{
nextSlide（）；
});
$（“.toRight”）。解除绑定（'click'）。单击（函数（）{
上一张幻灯片（）；
});
$（文档）.on（'keydown'，函数（e）{
var touche=e.keyCode；
如果（接触===39）{
上一张幻灯片（）；
}否则如果（触摸===37）{
nextSlide（）；
}
});
});
$（“.slider_close”）。单击（函数（）{
$（'.slider'）.css（'height'，'0'）；
});
/*滑块部分*/
.滑块{
位置：固定；
最高：0%；
底部：0%；
左：0%；
身高：0%；
宽度：100%；
背景：url（'../img/bg_header.png'）没有固定的重复中心；
背景尺寸：封面；
z指数：99999；
溢出y：滚动；
过渡：所有.3s易于输入输出；
}
.滑块.容器{
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：柔性端；
身高：100%；
}
.U关闭{
颜色：#FFF；
字体大小：30px；
字体系列：“OpenSans半黑体”，无衬线；
浮动：对；
边缘底部：100px；
}
.u内容{
溢出：隐藏；
保证金：0自动；
位置：相对位置；
}
.U.导航{
位置：绝对位置；
最高：55%；
左：0；
高度：40px；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
.U滑块{
字体大小：50px；
}
.U列表{
保证金：0自动；
溢出：隐藏；
位置：相对位置；
}
.U项目{
浮动：左；
显示：块；
位置：相对位置；
}
.slider_列表img{
宽度：901px；
身高：675px；
}
@媒体屏幕和（最大宽度：992px）{
.slider_列表img{
宽度：700px；
高度：525px；
}
}
@媒体屏幕和（最大宽度：768px）{
.slider_列表img{
宽度：320px；
高度：240px；
}
}



我想你能做到
.slider { position: relative; }