Question

这是我的身体：

body
{
    height:100%;
    width:100%;
    margin:0;
    padding:0;  
    overflow:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
   /* aesthetic stuff */
}

这是.page div：

.page
{
    position:absolute; 
    top:0; 
    bottom:0;
    left:0; 
    right:0;
    margin-top:60px;
    z-index:1;
    overflow-y:scroll; 
    -webkit-overflow-scrolling:touch;   
    /* aesthetic stuff */
}

这是列表项div

.item
{
    position:relative;
    height:80px;
    width:100%;
    margin:0;
    padding:0;
    /* aesthetic stuff */
}

这是一些HTML：

<body>
    <div id="pages-1" class="page"></div>
</body>

.page动态填充了未指定数量的这些：

<div class="item">Unique Item Content</div>

当您点击.item div时，会有一个未指定数量的其他.item div调用.hide()来过滤它们。然后，我将点击的.item滚动到window的顶部，没问题。

但是当您再次点击选定的.item时，要取消选中它，之前隐藏的所有.item个实例现在都会调用它们.show()，然后发送之前选中的.item取消选择.page到相对于window和.item的新位置。

首次选择时，我没有滚动到所选.item顶部的问题。但是在未经过滤的.item div的底部居住的.item个实例中，当您取消选择它时，我无法将其滚动到该项的顶部 。我甚至无法接近。 编辑：当我说我无法接近它时，我的意思是，它甚至不在视口中一英里。 结束编辑现在，{em> 的.item个实例位于div组的底部，在取消选择时滚动到它主要起作用。但是在($(el).position()).top向底部，而不是靠近。

我在尝试取消选中后尝试使用当前的position.top，在尝试首次选择时，我尝试将其原始data存储在jQuery divs中，然后过滤掉其他.page。我尝试过组合的东西。

我开始认为这是一个失败的原因。也许它与absolute定位// $('.item.certain-ones').not(el).hide(); or $('.item').not(el).show(); here alert($(el).position().top); $('.page').scrollTop($(el).position().top); alert($(el).position().top);有关，但由于其他原因我无法改变它。

更新

进一步测试：

scrollTop

结果： - 开选择：140，然后是0 - 取消选择：0，然后是1700

所以我尝试两次运行// $('.item.certain-ones').not(el).hide(); or $('.item').not(el).show(); here alert($(el).position().top); $('.page').scrollTop($(el).position().top); alert($(el).position().top); $('.page').scrollTop($(el).position().top); alert($(el).position().top);，看看有什么动摇：

.item

结果：

开选择：140，然后是0，然后是140
取消选择：1240，然后是0，然后是1240（在视口中不可见端）

但是...

如果在选择library(shiny) library(dplyr) library(DT) mtbetter<-mtcars%>% mutate(Car_number = c(1:32), Good_car = F) ui <- fluidPage( textInput(inputId = "text", label = "Filter Car Number"), actionButton("action", "Go!"), dataTableOutput(outputId = "table"), dataTableOutput(outputId = "table2") ) server = function(input, output, session){ mtfinal = reactiveVal(mtbetter) output$table<-renderDataTable({ mtfinal() }) observeEvent(input$action, {mtfinal()%>% mutate(Good_car = replace(Good_car, Car_number == input$text, T))}) output$table2<-renderDataTable({ mtbetter2<-mtbetter%>% mutate(Good_car = replace(Good_car, Car_number == input$text, T)) mtbetter2 }) } shinyApp(ui, server)之后，我手动向上滚动一点，该项目将在取消选择时保持在视口中的位置：

开选择：140，然后是0，然后是140
向上滚动......
取消选择：73，然后是1167，然后是73（完全在视口中，就好像其他元素不仅仅显示在其上方和下方;它甚至没有明显的移动。）

然而，如果我手动向下滚动一点，结果就像我没有手动滚动一样（见上文，例如，1240，然后是0，然后是1240），即不接近可见在视口中。

Answer 1

所以我的各种测试，尤其是当我手动向上滚动时，它会以某种方式重置视口，以便$(this).position().top被识别出来。＆＃34;我不知道如何解释它，但我尝试了这个并且它100％地解决了我的问题并且每次都直接滚动到未选择元素的精确顶部：

$('.page').scrollTop(0).scrollTop($(el).position().top);

其中el是点击的.item。

完美无缺。

Answer 2

您只需使用.page上的.scrollTop() .item顶部：

var hide = false;

$('.item').click(function(){
  if(hide){
    $('.item').show();
    $('.page').scrollTop($(this).position().top);
  }else{
    $('.item:nth-child(2n)').not(this).hide();
    $(this).show();
  }
  hide = !hide;
});

body
{
    height:100%;
    width:100%;
    margin:0;
    padding:0;  
    overflow:hidden;
    overflow-y:hidden;
    -webkit-overflow-scrolling:auto;
   /* aesthetic stuff */
}
.page
{
    position:absolute; 
    top:0; 
    bottom:0;
    left:0; 
    right:0;
    margin-top:60px;
    z-index:1;
    overflow-y:scroll; 
    -webkit-overflow-scrolling:touch;   
    /* aesthetic stuff */
}

.item
{
    position:relative;
    height:80px;
    width:100%;
    margin:0;
    padding:0;
    /* aesthetic stuff */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
    <div id="pages-1" class="page">
      <div class="item">Unique Item Content1</div>
      <div class="item">Unique Item Content2</div>
      <div class="item">Unique Item Content3</div>
      <div class="item">Unique Item Content4</div>
      <div class="item">Unique Item Content5</div>
    </div>
</body>
</html>

在更改高度

2 个答案: