| solunski.d |
19.08.2015 19:00 |
Вычислить высоту у элемента ul
Здравствуйте, пытаюсь определить высоту элемента ul и если элемент прокручен до конца выполнить действие.
Реализовал, только вот есть нюанс, причем непонятный, не поддается логики.
Вот ссылочка на код http://codepen.io/anon/pen/rVENXz
или
Вот код HTML
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p>прокрутил до конца</p>
<div class="scroll">
<ul class="h-filter__ul filter_1">
<li class="h-filter__list">
<input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox">
<label for="checkboxG1" class="css-label radGroup1 clr">Горошек</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox">
<label for="checkboxG2" class="css-label radGroup1 clr">Клеточка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox">
<label for="checkboxG3" class="css-label radGroup1 clr">Линейка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">
<label for="checkboxG4" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox">
<label for="checkboxG5" class="css-label radGroup1 clr">Удило</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox">
<label for="checkboxG6" class="css-label radGroup1 clr">Шарм</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG7" id="checkboxG7" class="css-checkbox">
<label for="checkboxG7" class="css-label radGroup1 clr">Горошек</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG8" id="checkboxG8" class="css-checkbox">
<label for="checkboxG8" class="css-label radGroup1 clr">Клеточка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG9" id="checkboxG9" class="css-checkbox">
<label for="checkboxG9" class="css-label radGroup1 clr">Линейка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG10" id="checkboxG10" class="css-checkbox">
<label for="checkboxG10" class="css-label radGroup1 clr">Узор</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
</ul>
</div>
Код CSS
.scroll {
height:500px;
width:400px;
overflow:scroll;
}
ul {
height: 100px;
list-style: none;
overflow-y: auto;
margin: 0;
padding: 0;
width: 80%;
}
и вот код JS
var div = $('ul'),
div_sh = $(div)[0].scrollHeight,
div_h = div.height();
$(div).scroll(function(){
if ($(this).scrollTop() >= div_sh - div_h) {
$('p').html('прокрутил до конца')
}
else {
$('p').html('не прокрутил до конца')
}
});
А проблема в том что если в CSS у элемента ul поставить высоту больше чем 100px то он не может определить промотан ли список до конца.
Что это за бред :blink: , если 100px и меньше норм, как только больше так не робит.
Помогите пожалуйста :help: |
