我得到图像的宽度。当我向左和右走的时候,我想让边界线停在那里。当我走到右边的时候,缺口会不断地打开。有人能帮忙吗?
jQuery
var imgContainer = $('.images').width();
function checkScroll() {
// Get current scroll position
var scrollLeftPosition = $('.img-container').scrollLeft();
// Calculate max scroll position
var maximumScroll = $('.img-container').prop('scrollWidth') -
$('.img-container')[0].offsetWidth;
// Make sure they show unless the if statement passes below
$('#left-scroll, #right-scroll').show();
if ( ( scrollLeftPosition === 0 ) ||
( scrollLeftPosition === maximumScroll ) ) {
}
}
$('#left-scroll').click(function() {
$(".img-container").animate(
{scrollLeft: '-=' + imgContainer + 'px'},
"fast",
checkScroll.bind(this)
);
});
$('#right-scroll').click(function() {
$(".img-container").animate(
{scrollLeft: '+=' + imgContainer + 'px'},
"fast",
checkScroll.bind(this)
);
});
http://jsfiddle.net/justfeel/snckrzhj/40/
谢谢你提前。
发布于 2021-10-21 16:06:23
问题是在HTML中,您的<img src=""/>
标记由1个空格分隔,这会在每个图像之间添加一个4px间隙,因此,当您滚动到右边或左侧时,这个空白组合会使您的滚动功能混乱。
一个简单而快速的修复方法就是移除<img>
标记之间的这些空格。
还有另一个问题,那就是hr
类在右边增加了一个像素间隔,这也会使滚动活动变得复杂和混乱。所以我才删除了你们的边框。
尝试以下代码片段:
var imgContainer = $('.images').width();
function checkScroll() {
var scrollLeftPosition = $('.img-container').scrollLeft();
var maximumScroll = $('.img-container').prop('scrollWidth') -
$('.img-container')[0].offsetWidth;
$('#left-scroll, #right-scroll').show();
if ( ( scrollLeftPosition === 0 ) ||
( scrollLeftPosition === maximumScroll ) ) {
}
}
$('#left-scroll').click(function() {
$(".img-container").animate(
{scrollLeft: '-=' + imgContainer + 'px'},
"fast",
checkScroll.bind(this)
);
});
$('#right-scroll').click(function() {
$(".img-container").animate(
{scrollLeft: '+=' + imgContainer + 'px'},
"fast",
checkScroll.bind(this)
);
});
.img-container{
width:600px;
height:200px;
background:#ccc;
overflow: auto;
overflow-x: hidden; /*hide default scrollbar*/
white-space: nowrap; /*makes list scrollable*/
margin-left:200px;
margin-top:50px;
}
.images{
width:150px;
height:auto;
}
#right-scroll {
font-size: 15px;
position:absolute;
right: 150px;
top:100px;
text-shadow: 1px 1px 0 rgb(255 255 255 / 30%);
cursor:pointer;
z-index:999;
}
#left-scroll {
position:absolute;
left: 150px;
color: black;
top:100px;
font-size: 15px;
text-shadow: 1px 1px 0 rgb(255 255 255 / 30%);
cursor: pointer;
z-index: 999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-container"><img class="images" src="https://picsum.photos/id/237/200/150"><img class="images" src="https://picsum.photos/id/238/200/150"><img class="images" src="https://picsum.photos/id/239/200/150"><img class="images" src="https://picsum.photos/id/240/200/150"><img class="images" src="https://picsum.photos/id/241/200/150"><img class="images" src="https://picsum.photos/id/242/200/150"><img class="images" src="https://picsum.photos/id/243/200/150"><img class="images" src="https://picsum.photos/id/244/200/150"></div>
<button id="left-scroll" >Left</button>
<button id="right-scroll">Right</button>
https://stackoverflow.com/questions/69663743
复制相似问题