为什么元素不能完全按预期滚动

Question

我想将div区域内的scrolable滚动放置在second区域内，现在它正常工作，third， var elements = [{ value: "first", label: "first", }, { value: "second", label: "second", }, { value: "thired", label: "thired", }, { value: "fourth", label: "fourth", },{ value: "fifth", label: "fifth", },{ value: "sixth", label: "sixth", },{ value: "seventh", label: "seventh", },{ value: "eighth", label: "eighth", },{ value: "nineth", label: "nineth", },{ value: "tenth", label: "tenth", },{ value: "eleventh", label: "eleventh", },{ value: "twelth", label: "twelth", },{ value: "thirtheen", label: "thirtheen", },{ value: "fourtheen", label: "fourtheen", },{ value: "fiftheen", label: "fiftheen", },{ value: "sixtheen", label: "sixtheen", },{ value: "seventtheen", label: "seventtheen", },{ value: "eighteen", label: "eighteen", },{ value: "ninetheen", label: "ninetheen", },{ value: "twenty", label: "twenty", }]; $('#search').autocomplete({ minLength: 0, source: elements, select: function (event, ui) { console.log(ui); $('.selectable').removeClass('selected'); $('.selectable[data-id="'+ui.item.label+'"]').addClass('selected'); $('.scrollable').animate({ scrollTop: $('.selectable[data-id="'+ui.item.label+'"]').offset().top }, "slow"); } }); $('.selectable').click(function(){ $('.selectable').removeClass('selected'); $(this).addClass('selected'); });时间。

问题：总是希望我的搜索元素显示在顶部或应该是可见的

这就是我所拥有的：

＆＃13;

＆＃13;

#wrapper{
           margin:50px 0px 0px 300px;
	    }
       .scrollable{
       	   width: 500px;
       	   max-height: 150px;
       	   overflow: scroll;
       }
       ul li.selectable{
           list-style: none;
           width: 100%;
           height: 30px;
           background-color: #b5b5b3;
           border: 1px solid black;
           text-align: center;
           color: white;
       }

       ul li.selectable:hover{
           background-color: #5158b1;
           cursor: pointer;
       }       
      .selected{
       	  background-color: blue !important;
       }

       #search{
       	   position: relative;
           float: left;
       }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id="wrapper">
		  <div>
		  	 <input id="search"/>
		  </div>
		  <div class="scrollable">
		  	   <ul>
		  	   	<li class="selectable" data-id="first">first</li>
		  	   	<li class="selectable" data-id="second">second</li>
		  	   	<li class="selectable" data-id="thired">thired</li>
		  	   	<li class="selectable" data-id="fourth">fourth</li>
		  	   	<li class="selectable" data-id="fifth">fifth</li>
		  	   	<li class="selectable" data-id="sixth">sixth</li>
		  	   	<li class="selectable" data-id="seventh">seventh</li>
		  	   	<li class="selectable" data-id="eighth">eighth</li>
		  	   	<li class="selectable" data-id="nineth">nineth</li>
		  	   	<li class="selectable" data-id="tenth">tenth</li>
		  	   	<li class="selectable" data-id="eleventh">eleventh</li>
		  	   	<li class="selectable" data-id="twelth">twelth</li>
		  	   	<li class="selectable" data-id="thirtheen">thirtheen</li>
		  	   	<li class="selectable" data-id="fourtheen">fourtheen</li>
		  	   	<li class="selectable" data-id="fiftheen">fiftheen</li>
		  	   	<li class="selectable" data-id="sixtheen">sixtheen</li>
		  	   	<li class="selectable" data-id="seventtheen">seventtheen</li>
		  	   	<li class="selectable" data-id="eighteen">eighteen</li>
		  	   	<li class="selectable" data-id="ninetheen">ninetheen</li>
		  	   	<li class="selectable" data-id="twenty">twenty</li>
		  	   </ul>
		  </div>
 </div>

＆＃13;

import re

input_str = input("Please enter your score in the form socre/max(eg. 30/50)")

while re.match(r'[0-9]+/[0-9]+',input_str) == None:
    input_str = input("Please enter your score in the form socre/max(eg. 30/50)")

print('matched')

＆＃13;

＆＃13;

＆＃13;

请：搜索并查看定位，但不是正确的

的jsfiddle： https://jsfiddle.net/m9p5rv47/4/

Answer 1

您需要减去父级的offsetTop并添加父级的scrollTop，

这样可以解决问题：

$('.scrollable').animate({
    scrollTop: $('.selectable[data-id="'+ui.item.label+'"]').offset().top - $('.scrollable').offset().top + $('.scrollable').scrollTop()
}, "slow");

小提琴：https://jsfiddle.net/m9p5rv47/37/

＆＃13;

＆＃13;

$(function() {

  var elements = [{
      value: "first",
      label: "first",
    }, {
      value: "second",
      label: "second",

    }, {
      value: "thired",
      label: "thired",
    },
    {
      value: "fourth",
      label: "fourth",
    }, {
      value: "fifth",
      label: "fifth",
    }, {
      value: "sixth",
      label: "sixth",
    }, {
      value: "seventh",
      label: "seventh",
    }, {
      value: "eighth",
      label: "eighth",
    }, {
      value: "nineth",
      label: "nineth",
    }, {
      value: "tenth",
      label: "tenth",
    }, {
      value: "eleventh",
      label: "eleventh",
    }, {
      value: "twelth",
      label: "twelth",
    }, {
      value: "thirtheen",
      label: "thirtheen",
    }, {
      value: "fourtheen",
      label: "fourtheen",
    }, {
      value: "fiftheen",
      label: "fiftheen",
    }, {
      value: "sixtheen",
      label: "sixtheen",
    }, {
      value: "seventtheen",
      label: "seventtheen",
    }, {
      value: "eighteen",
      label: "eighteen",
    }, {
      value: "ninetheen",
      label: "ninetheen",
    }, {
      value: "twenty",
      label: "twenty",
    }
  ];

  $('#search').autocomplete({
    minLength: 0,
    source: elements,
    select: function(event, ui) {
      
      $('.selectable').removeClass('selected');

      $('.selectable[data-id="' + ui.item.label + '"]').addClass('selected');
      
      $('.scrollable').animate({
        scrollTop: $('.selectable[data-id="' + ui.item.label + '"]').offset().top - $('.scrollable').offset().top + $('.scrollable').scrollTop()
      }, "slow");

    }
  });

  $('.selectable').click(function() {
    $('.selectable').removeClass('selected');
    $(this).addClass('selected');

  });
});

＆＃13;

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
}

#wrapper {
  /*margin:50px 0px 0px 300px;*/
}

.scrollable {
  width: 100%;
  max-height: 250px;
  overflow-y: scroll;
}

ul li.selectable {
  list-style: none;
  width: 100%;
  height: 30px;
  background-color: #b5b5b3;
  border: 1px solid black;
  text-align: center;
  color: white;
}

ul li.selectable:hover {
  background-color: #5158b1;
  cursor: pointer;
}

.selected {
  background-color: blue !important;
}

#search {
  position: relative;
  float: left;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<div id="wrapper">
  <div>
    <input id="search" />
  </div>
  <div class="scrollable">
    <ul>
      <li class="selectable" data-id="first">first</li>
      <li class="selectable" data-id="second">second</li>
      <li class="selectable" data-id="thired">thired</li>
      <li class="selectable" data-id="fourth">fourth</li>
      <li class="selectable" data-id="fifth">fifth</li>
      <li class="selectable" data-id="sixth">sixth</li>
      <li class="selectable" data-id="seventh">seventh</li>
      <li class="selectable" data-id="eighth">eighth</li>
      <li class="selectable" data-id="nineth">nineth</li>
      <li class="selectable" data-id="tenth">tenth</li>
      <li class="selectable" data-id="eleventh">eleventh</li>
      <li class="selectable" data-id="twelth">twelth</li>
      <li class="selectable" data-id="thirtheen">thirtheen</li>
      <li class="selectable" data-id="fourtheen">fourtheen</li>
      <li class="selectable" data-id="fiftheen">fiftheen</li>
      <li class="selectable" data-id="sixtheen">sixtheen</li>
      <li class="selectable" data-id="seventtheen">seventtheen</li>
      <li class="selectable" data-id="eighteen">eighteen</li>
      <li class="selectable" data-id="ninetheen">ninetheen</li>
      <li class="selectable" data-id="twenty">twenty</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;