20.01.2021, 19:02
|
|
Новичок на форуме
|
|
Регистрация: 25.07.2009
Сообщений: 8
|
|
|
Синхронизация скролла в нескольких элементах
Здравствуйте!
Стоит задача синхронизировать скролл между разными элементами (div).
При скролле одного div с классом block должен скролиться и div с классом main. При скролле другого div с классом block, должен скролиться div с классом main с того места, где остановился в предыдущий раз.
Как можно запомнить положение div с классом main и продолжить скролл с того же места?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".block").scroll(function(){
var scroller = $(this).scrollTop();
$(".main").scrollTop(scroller);
//console.log($(".main").scrollTop());
//console.log($(".block").offset().top);
});
});
</script>
<style type="text/css">
/* ::-webkit-scrollbar {
width:0;
height:0;
}
*/
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
/*-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;*/
}
.main {
width:100%;
height:500px;
overflow-y:scroll;
overflow-x:hidden;
}
.block {
width:250px;
height:100%;
display:inline-block;
float:left;
overflow-y:scroll;
overflow-x:hidden;
}
.header {
width:100%;
height:170px;
background:yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="block" style="background:blue;">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
<h1>Item 5</h1>
<h1>Item 6</h1>
<h1>Item 7</h1>
<h1>Item 8</h1>
<h1>Item 9</h1>
<h1>Item 10</h1>
<h1>Item 11</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
</div>
<div class="block" style="background:red;">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
<h1>Item 5</h1>
<h1>Item 6</h1>
<h1>Item 7</h1>
<h1>Item 8</h1>
<h1>Item 9</h1>
<h1>Item 10</h1>
<h1>Item 11</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
</div>
<div class="block" style="background:green;">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
<h1>Item 5</h1>
<h1>Item 6</h1>
<h1>Item 7</h1>
<h1>Item 8</h1>
<h1>Item 9</h1>
<h1>Item 10</h1>
<h1>Item 11</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
</div>
</div>
</body>
</html>
Последний раз редактировалось osv, 20.01.2021 в 23:44.
|
|
20.01.2021, 19:43
|
|
Новичок на форуме
|
|
Регистрация: 25.07.2009
Сообщений: 8
|
|
рони,
Вот так выглядит поведение скролла.
При переходе от одного блока к другому, окно подпрыгивает к координатам блока, по которому начался скролл, а нужно, чтобы при переходе от одного блока к другому этого скачка не было.
|
|
20.01.2021, 20:49
|
|
Новичок на форуме
|
|
Регистрация: 25.07.2009
Сообщений: 8
|
|
|
рони,
Перезалил запись, может быть что-то прояснится.
|
|
20.01.2021, 21:18
|
|
Новичок на форуме
|
|
Регистрация: 25.07.2009
Сообщений: 8
|
|
Сообщение от рони
|
|
??? это о чём?
|
В предыдущем посте выложил гифку с поведением скроллов. Спасибо за HTML RUN. |
|
20.01.2021, 21:22
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
osv,
на всякий случай
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
20.01.2021, 21:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
osv,
гифку я не вижу, проблему вашу не понимаю, макет вы сделали, это замечательно, другим это поможет лучше понять ваш вопрос, я ничем более, пока, помочь не могу.
|
|
20.01.2021, 22:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
osv,
попытка угадать ...
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<title>test</title>
<style type="text/css">
html, body {
width:100%;
height:100%;
padding:0;
margin:0;
/*-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;*/
}
.main {
width:100%;
height: calc(100vh + 200px);
overflow:hidden;
display: flex;
flex-wrap: wrap;
}
.block {
flex-grow: 3;
height: 100vh;
overflow-y:scroll;
overflow-x:hidden;
}
.header {
width:100%;
height:200px;
background:yellow;
flex: 0 1 1;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="block" style="background:blue;">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
<h1>Item 5</h1>
<h1>Item 6</h1>
<h1>Item 7</h1>
<h1>Item 8</h1>
<h1>Item 9</h1>
<h1>Item 10</h1>
<h1>Item 11</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
</div>
<div class="block" style="background:red;">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
<h1>Item 5</h1>
<h1>Item 6</h1>
<h1>Item 7</h1>
<h1>Item 8</h1>
<h1>Item 9</h1>
<h1>Item 10</h1>
<h1>Item 11</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
</div>
<div class="block" style="background:green;">
<h1>Item 1</h1>
<h1>Item 2</h1>
<h1>Item 3</h1>
<h1>Item 5</h1>
<h1>Item 6</h1>
<h1>Item 7</h1>
<h1>Item 8</h1>
<h1>Item 9</h1>
<h1>Item 10</h1>
<h1>Item 11</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 12</h1>
<h1>Item 13</h1>
<h1>Item 14</h1>
<h1>Item 15</h1>
<h1>Item 16</h1>
<h1>Item 17</h1>
<h1>Item 18</h1>
<h1>Item 19</h1>
<h1>Item 20</h1>
<h1>Item 21</h1>
<h1>Item 22</h1>
<h1>Item 23</h1>
<h1>Item 24</h1>
<h1>Item 25</h1>
<h1>Item 26</h1>
<h1>Item 27</h1>
</div>
</div>
</body>
</html>
|
|
20.01.2021, 23:40
|
|
Новичок на форуме
|
|
Регистрация: 25.07.2009
Сообщений: 8
|
|
|
При скролле div с классом block, должен одновременно скролится div с классом main, в который вложено несколько div block. У меня при скролле одного div block, все работает нормально, пока не начинается сколл другого div block. В этот момент происходит перескакивание block main к верху экрана, т. к. у нового div block другое расстояние scrollTop. Как то так. Надеюсь, что-то прояснил.
|
|
20.01.2021, 23:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от osv
|
|
Надеюсь, что-то прояснил.
|
...  |
|
|
|
