Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вычислить высоту у элемента ul (https://javascript.ru/forum/misc/57789-vychislit-vysotu-u-ehlementa-ul.html)

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:

solunski.d 19.08.2015 19:13
Нашел более универсальный код

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


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

рони 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 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);
    });

рони 19.08.2015 20:11
Цитата:
Сообщение от solunski.d
первый метод имеет проблемы связанные с высотой
нет там никаких проблем -- сформировали dom взяли высоту

Цитата:
Сообщение от solunski.d
Помимо этого я хотел бы реализовать поднятие вверх.
и в чём проблема scrollTop: 0 сделать?

solunski.d 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);
    });
}

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

solunski.d 19.08.2015 20:36
Вот картинка


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

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

рони 19.08.2015 20:55
Цитата:
Сообщение от solunski.d
кнопка теперь прокручивает вверх
а если хочется снова вниз?

solunski.d 19.08.2015 21:03
Цитата:
Сообщение от рони (Сообщение 384858)
а если хочется снова вниз?
то соответственно у кнопки меняется значок и прокручивается вниз.
Я видел реализацию прокрутки, но они прокручивали не по чуть чуть, а сразу вверх или в низ.
В JS я еще не силен, а работодатель хочет посмотреть на что я способен


Часовой пояс GMT +3, время: 18:00.
Страница 1 из 3 1 23 >
Показывать 40 сообщений этой темы на одной странице