ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как создать список со скроллом?
5 сообщений из 5, страница 1 из 1
Как создать список со скроллом?
    #39841393
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ролг Хупин
Участник
Есть модальный диалог, в нем вызываю Partial View, там создается список
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
@model List<string>
@*<div class="row">*@
<div id="viewResults">
    <div class="col-md-12">
        

        <ul>
            @foreach (string logRecord in Model)//ViewBag.Logs)
            {
                if (!string.IsNullOrEmpty(logRecord))
                {
					<li style="color:blue;">
						@logRecord
					</li>
                }
            }
        </ul>
    </div>
</div>



Когда записей много диалог растягивается вниз, это не правильно.

Как сделать список со скроллом, ограничив его размер - например, на 10 видимых записей?
...
Рейтинг: 0 / 0
25.07.2019, 14:00
| Ответить | Цитировать | Написать  
Как создать список со скроллом?
    #39841405
Фотография Konst_One
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Konst_One
Участник
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 4.5em;
  overflow-y: scroll
}

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
   <li>item6</li>
   <li>item7</li>
   <li>item8</li>
   <li>item9</li>
</ul>
...
Рейтинг: 0 / 0
25.07.2019, 14:09
| Ответить | Цитировать | Написать  
Как создать список со скроллом?
    #39841423
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ролг Хупин
Участник
Konst_One
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 4.5em;
  overflow-y: scroll
}

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
   <li>item6</li>
   <li>item7</li>
   <li>item8</li>
   <li>item9</li>
</ul>



Да, понял, сделал проще пока, но теперь скролл вниз не работает, т.е. до того скроллировался весь диалог - работало, теперь, когда сделал список со скроллом - не срабатывает:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
@model List<string>
@*<div class="row">*@
<div id="viewResults">
<div class="col-md-12" style="height:200px;overflow-y:scroll">
        <ul>
            @foreach (string logRecord in Model)//ViewBag.Logs)
            {
                if (!string.IsNullOrEmpty(logRecord))
                {
					<li style="color:blue;">
						@logRecord
					</li>
                }
            }
        </ul>
        <a name="LogBottomAnchor" id="LogBottomAnchor"></a>
    </div>
</div>

<script type="text/javascript">
    function ScrollView() {
        $('html, body').animate({
            scrollTop: $("#LogBottomAnchor").offset().top
        }, 1000);
    }
    window.onload = ScrollView;
</script>
...
Рейтинг: 0 / 0
25.07.2019, 14:38
| Ответить | Цитировать | Написать  
Как создать список со скроллом?
    #39841536
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ролг Хупин
Участник
Терзания продолжаю, сделал кнопку Рефреш в диалоге для простоты и вызов функции

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
   function RefreshLog()
    {
        var url = '@Url.Action("RefreshLogs", "Home")';
        $('#viewResults').load(url);
        ScrollView2();
    };
	function ScrollView2() {

        items = document.querySelectorAll(".listclass");
        last = items[items.length - 1];
        last.scrollIntoView();
    }



Если вызываю на кнопке только функцию ScrollView2 - скролл вниз работает, если RefreshLog() - то вижу как список дергается, пытается сходить вниз и успокаивается в начале списка.

Что не так?
...
Рейтинг: 0 / 0
25.07.2019, 17:13
| Ответить | Цитировать | Написать  
Как создать список со скроллом?
    #39841546
Ролг Хупин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ролг Хупин
Участник
Нашел, причина в том что load - асинхронная, и вместо

Код: javascript
1.
2.
3.
4.
5.
6.
   function RefreshLog()
    {
        var url = '@Url.Action("RefreshLogs", "Home")';
        $('#viewResults').load(url);
        ScrollView2();
    };



Надо
Код: javascript
1.
2.
3.
4.
5.
   function RefreshLog()
    {
        var url = '@Url.Action("RefreshLogs", "Home")';
        $('#viewResults').load(url, ScrollView2());
    };



Тогда ScrollView2 будет вызвана после отработки урл и загрузки списка
...
Рейтинг: 0 / 0
25.07.2019, 17:37
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / ASP.NET [игнор отключен] [закрыт для гостей] / Как создать список со скроллом?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]