Синхронизация скролла в нескольких элементах
Здравствуйте!
Стоит задача синхронизировать скролл между разными элементами (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,
на всякий случай О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
osv,
гифку я не вижу, проблему вашу не понимаю, макет вы сделали, это замечательно, другим это поможет лучше понять ваш вопрос, я ничем более, пока, помочь не могу. |
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> |
При скролле div с классом block, должен одновременно скролится div с классом main, в который вложено несколько div block. У меня при скролле одного div block, все работает нормально, пока не начинается сколл другого div block. В этот момент происходит перескакивание block main к верху экрана, т. к. у нового div block другое расстояние scrollTop. Как то так. Надеюсь, что-то прояснил.
|
Цитата:
|
Часовой пояс GMT +3, время: 09:24. |