Question

如何向左滚动到具有类pincard-checked的元素，以下是我试图无效的内容。感谢您的任何帮助。

HTML：

<div class="pinGridWrapper">
<div class="pinGrid">


<div class="pin"> content </div>
<div class="pin"> content </div>
<div class="pin pincard-checked"> content </div>
<div class="pin"> content </div>

</div>
</div>

CSS：

.pinGridWrapper {
    overflow-x:scroll;
    overflow-y:hidden;
    width:100%;
    padding: 0px;
}

.pinGrid {
display:inline-flex;
list-style: none;
padding:0px;
}

.pin {
width:300px;
background: #fff;
margin:0px 10px 0px 10px; 
position: relative;
height:525px; 
margin-top:10px;
display:inline-block;
 overflow-y:hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

JS：

$(document).ready(function(){
      $('.pinGridWrapper').animate({scrollLeft: $('.pincard-checked').offset().left}, 800);
      return false;
   });

FIDDLE

更新：我认为问题在于在pinGrid上使用inline-flex。以防万一有人之前遇到过这种情况。

Answer 1

试试这个检查https://jsfiddle.net/hzeLekht/

$(document).ready(function() {
    $('html,body').animate({
        scrollTop: $('.pincard-checked').offset().top
    }, 800, function() {
    });
});

Answer 2

这似乎是这样做的方式。

对于将来可能需要执行此操作的任何人，请确保在页面完成后加载滚动脚本，否则不会发生任何事情。

  $(document).ready(function() {
        $('.pinGridWrapper').animate({
            scrollLeft: $('.pincard-checked').offset().left
        }, 1000, function() {
        });
    });

FIDDLE

如何在溢出的div中向左滚动到特定的类名？

2 个答案: