Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.08.2015, 19:00
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Вычислить высоту у элемента 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 то он не может определить промотан ли список до конца.
Что это за бред , если 100px и меньше норм, как только больше так не робит.
Помогите пожалуйста
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2015, 19:13
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

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

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


Но почему первый вариант не работает???
Ответить с цитированием
  #3 (permalink)  
Старый 19.08.2015, 19:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,790

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>
Ответить с цитированием
  #4 (permalink)  
Старый 19.08.2015, 19:30
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

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

Еще один вопрос, есть у меня кнопка "Другие" с классом .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);
    });

Последний раз редактировалось solunski.d, 19.08.2015 в 19:40.
Ответить с цитированием
  #5 (permalink)  
Старый 19.08.2015, 20:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,790

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

Сообщение от solunski.d
Помимо этого я хотел бы реализовать поднятие вверх.
и в чём проблема scrollTop: 0 сделать?
Ответить с цитированием
  #6 (permalink)  
Старый 19.08.2015, 20:16
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Дело в том я не еще не бум бум в 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,790

solunski.d,
может над логикой подумать и другой алгоритм изобрести?
или как-то иначе обьяснить, непонятно же чего творите?
Ответить с цитированием
  #8 (permalink)  
Старый 19.08.2015, 20:36
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Вот картинка


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

Я пытаюсь реализовать прокрутку в списке, при щелчке на кнопку "Другие". Если довести список до конца, меняется значок и кнопка теперь прокручивает вверх.
Ответить с цитированием
  #9 (permalink)  
Старый 19.08.2015, 20:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,790

Сообщение от solunski.d
кнопка теперь прокручивает вверх
а если хочется снова вниз?
Ответить с цитированием
  #10 (permalink)  
Старый 19.08.2015, 21:03
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить ширину и высоту элемента див sanhai Элементы интерфейса 8 13.11.2018 17:04
.height() почему-то считает высоту элемента неправильно adelante jQuery 11 01.08.2012 14:38
Можно ли средствами JS узнать высоту скрытого элемента? ацкий Общие вопросы Javascript 7 24.08.2011 18:07
Браузер не успевает определить высоту вновь созданного через XMLHttpRequest элемента Lockpickup AJAX и COMET 17 25.04.2011 16:58
Вычислить реальную ширину элемента без его отрисовки archytector Элементы интерфейса 7 12.01.2011 08:26