首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >滚动到图像的宽度

滚动到图像的宽度
EN

Stack Overflow用户
提问于 2021-10-21 14:24:47
回答 1查看 46关注 0票数 1

我得到图像的宽度。当我向左和右走的时候,我想让边界线停在那里。当我走到右边的时候,缺口会不断地打开。有人能帮忙吗?

jQuery

代码语言:javascript
运行
复制
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/

谢谢你提前。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-21 16:06:23

问题是在HTML中,您的<img src=""/>标记由1个空格分隔,这会在每个图像之间添加一个4px间隙,因此,当您滚动到右边或左侧时,这个空白组合会使您的滚动功能混乱。

一个简单而快速的修复方法就是移除<img>标记之间的这些空格。

还有另一个问题,那就是hr类在右边增加了一个像素间隔,这也会使滚动活动变得复杂和混乱。所以我才删除了你们的边框。

尝试以下代码片段:

代码语言:javascript
运行
复制
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)
  );
});
代码语言:javascript
运行
复制
.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;
}
代码语言:javascript
运行
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69663743

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档