Форум

solunski.d · #1 (**permalink**) 19.08.2015, 19:00

Здравствуйте, пытаюсь определить высоту элемента 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 то он не может определить промотан ли список до конца.
Что это за бред

, если 100px и меньше норм, как только больше так не робит.
Помогите пожалуйста

solunski.d · #2 (**permalink**) 19.08.2015, 19:13

Нашел более универсальный код

$('ul').scroll(function () {
    if (this.scrollHeight - this.scrollTop === this.clientHeight) {
        alert('End');
    }
});

Но почему первый вариант не работает???

рони · #3 (**permalink**) 19.08.2015, 19:14

solunski.d,
ой

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .scroll {
  height:500px;
  width:400px;
  overflow:scroll;
}
ul {
  height: 321px;
  list-style: none;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  width: 80%;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       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('не прокрутил до конца')
    }
});

});


  </script>
</head>

<body>
<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>



</body>

</html>

solunski.d · #4 (**permalink**) 19.08.2015, 19:30

Ну я так понял что первый метод имеет проблемы связанные с высотой.

Еще один вопрос, есть у меня кнопка "Другие" с классом .filter_other1, под списком, как только элемент промотан до конца, меняется класс у элемента span.
Помимо этого я хотел бы реализовать поднятие вверх.
То есть пролистать список до конца и кликаю по этой кнопкой еще пролистать вверх.
Как проделать такое условие?

$('ul').scroll(function () {
    if (this.scrollHeight - this.scrollTop === this.clientHeight) {
		$('.filter_other1 span').removeClass('glyphicon-triangle-bottom');
        $('.filter_other1 span').addClass('glyphicon-triangle-top');
    } else {
		$('.filter_other1 span').removeClass('glyphicon-triangle-top');
		$('.filter_other1 span').addClass('glyphicon-triangle-bottom');
	}
});

Для промотки списка в низ использовал такой код

$('.filter_other1').click(function () {
        $('ul').animate({
            scrollTop: '+=53'
        }, 1000);
    });

рони · #5 (**permalink**) 19.08.2015, 20:11

Сообщение от solunski.d

первый метод имеет проблемы связанные с высотой

нет там никаких проблем -- сформировали dom взяли высоту

Сообщение от solunski.d

Помимо этого я хотел бы реализовать поднятие вверх.

и в чём проблема scrollTop: 0 сделать?

solunski.d · #6 (**permalink**) 19.08.2015, 20:16

Дело в том я не еще не бум бум в JS
Вот пытался сделать поднятие вверх, но не работает...

$('.filter_1').scroll(function () {
    if (this.scrollHeight - this.scrollTop === this.clientHeight) {
		$('.filter_other1 span').removeClass('glyphicon-triangle-bottom');
        $('.filter_other1 span').addClass('glyphicon-triangle-top');
		$('.filter_other1').removeClass('bottom');
		$('.filter_other1').addClass('up');
    } else {
		$('.filter_other1 span').removeClass('glyphicon-triangle-top');
		$('.filter_other1 span').addClass('glyphicon-triangle-bottom');
		$('.filter_other1').removeClass('up');
		$('.filter_other1').addClass('bottom');
		
	}
});
if ( $(".filter_other1").hasClass("bottom") ) {
    $('.filter_other1').click(function () {
        $('.filter_1').animate({
            scrollTop: '+=53'
        }, 1000);
    });
} else if ( $(".filter_other1").hasClass("up") ) {
    $('.filter_other1').click(function () {
        $('.filter_1').animate({
            scrollTop: '-53'
        }, 1000);
    });
}

рони · #7 (**permalink**) 19.08.2015, 20:28

solunski.d,
может над логикой подумать и другой алгоритм изобрести?
или как-то иначе обьяснить, непонятно же чего творите?

solunski.d · #8 (**permalink**) 19.08.2015, 20:36

Вот картинка

Как вы заметили есть список, причем целых 4.
Под каждым списком есть кнопка "Другие" и значок.

Я пытаюсь реализовать прокрутку в списке, при щелчке на кнопку "Другие". Если довести список до конца, меняется значок и кнопка теперь прокручивает вверх.

рони · #9 (**permalink**) 19.08.2015, 20:55

Сообщение от solunski.d

кнопка теперь прокручивает вверх

а если хочется снова вниз?

solunski.d · #10 (**permalink**) 19.08.2015, 21:03

Сообщение от рони

а если хочется снова вниз?

то соответственно у кнопки меняется значок и прокручивается вниз.
Я видел реализацию прокрутки, но они прокручивали не по чуть чуть, а сразу вверх или в низ.
В JS я еще не силен, а работодатель хочет посмотреть на что я способен

Форум

Справочник

Discord чат

Курсы javascript