Question

在带有滚动条的<div>中，如果所选元素已经可见，我希望不执行任何操作，如果该元素尚未显示，则滚动到它。

＆＃13;

$('.button').click(function() {
   var selected = '#c' + $(this).attr('id');
   console.log(selected);
   //$(selected).???
} 
);

＆＃13;

#b { height:120px; width: 200px; overflow:auto; background-color: blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="b">
<p id="c1">hello</p>
<p id="c2">hello2</p>
<p id="c3">hello3</p>
<p id="c4">hello4</p>
<p id="c5">hello5</p>
<p id="c6">hello6</p>
<p id="c7">hello7</p>
</div>
<div class="button" id="2">click here to show "hello2"</div>
<div class="button" id="6">click here to show "hello6"</div>

＆＃13;

Answer 1

更新为不作为评论，滚动所有页面

可能就像这个

一样简单

＆＃13;

$('.button').click(function() {
  scrollChildIntoView( $('#c' + $(this).attr('id'))[0] );  
});

function scrollChildIntoView(el) {
  el.parentElement.scrollTop = el.offsetTop - (el.offsetHeight/2);
}

＆＃13;

#b { height:120px; width: 200px; overflow:auto; background-color: blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="b">
<p id="c1">hello</p>
<p id="c2">hello2</p>
<p id="c3">hello3</p>
<p id="c4">hello4</p>
<p id="c5">hello5</p>
<p id="c6">hello6</p>
<p id="c7">hello7</p>
</div>
<div class="button" id="2">click here to show "hello2"</div>
<div class="button" id="6">click here to show "hello6"</div>

＆＃13;

或先检查（整个元素应该在视图中）

＆＃13;

$('.button').click(function() {
  if (!isChildScrolledIntoView( $('#c' + $(this).attr('id'))[0] )) {
    scrollChildIntoView( $('#c' + $(this).attr('id'))[0] );  
  }
});

function isChildScrolledIntoView(el) {
  return ((el.getBoundingClientRect().top >= 0) && (el.getBoundingClientRect().bottom <= el.parentElement.offsetHeight));  
}
function scrollChildIntoView(el) {
  el.parentElement.scrollTop = el.offsetTop - (el.offsetHeight/2);
}

＆＃13;

#b { height:120px; width: 200px; overflow:auto; background-color: blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="b">
<p id="c1">hello</p>
<p id="c2">hello2</p>
<p id="c3">hello3</p>
<p id="c4">hello4</p>
<p id="c5">hello5</p>
<p id="c6">hello6</p>
<p id="c7">hello7</p>
</div>
<div class="button" id="2">click here to show "hello2"</div>
<div class="button" id="6">click here to show "hello6"</div>

＆＃13;

或先检查（部分在视图中）

＆＃13;

$('.button').click(function() {
  if (!isPartialChildScrolledIntoView( $('#c' + $(this).attr('id'))[0] )) {
    scrollChildIntoView( $('#c' + $(this).attr('id'))[0] );  
  }
});

function isPartialChildScrolledIntoView(el) {
  return ((el.getBoundingClientRect().top < el.parentElement.offsetHeight) && (el.getBoundingClientRect().bottom > 0));  
}
function scrollChildIntoView(el) {
  el.parentElement.scrollTop = el.offsetTop - (el.offsetHeight/2);
}

＆＃13;

#b { height:120px; width: 200px; overflow:auto; background-color: blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="b">
<p id="c1">hello</p>
<p id="c2">hello2</p>
<p id="c3">hello3</p>
<p id="c4">hello4</p>
<p id="c5">hello5</p>
<p id="c6">hello6</p>
<p id="c7">hello7</p>
</div>
<div class="button" id="2">click here to show "hello2"</div>
<div class="button" id="6">click here to show "hello6"</div>

＆＃13;

Answer 2

这可能适合你。

＆＃13;

$('.button').click(function() {
   var id = $(this).attr('id');
   var selected = '#c' + id;
   $('#b').scrollTop(36 * (--id));
} 
);

＆＃13;

#b { height:120px; width: 200px; overflow:auto; background-color: yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="b">
<p id="c1">hello1</p>
<p id="c2">hello2</p>
<p id="c3">hello3</p>
<p id="c4">hello4</p>
<p id="c5">hello5</p>
<p id="c6">hello6</p>
<p id="c7">hello7</p>
</div>
<div class="button" id="1">click here to show "hello1"</div>
<div class="button" id="2">click here to show "hello2"</div>
<div class="button" id="3">click here to show "hello3"</div>
<div class="button" id="4">click here to show "hello4"</div>
<div class="button" id="5">click here to show "hello5"</div>
<div class="button" id="6">click here to show "hello6"</div>
<div class="button" id="7">click here to show "hello7"</div>

＆＃13;

如果所选元素可见，则不执行任何操作，否则滚动到该元素

2 个答案: