Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2021, 19:02
osv osv вне форума
Новичок на форуме
Отправить личное сообщение для osv Посмотреть профиль Найти все сообщения от osv
 
Регистрация: 25.07.2009
Сообщений: 6

Синхронизация скролла в нескольких элементах
Здравствуйте!
Стоит задача синхронизировать скролл между разными элементами (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.
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2021, 19:43
osv osv вне форума
Новичок на форуме
Отправить личное сообщение для osv Посмотреть профиль Найти все сообщения от osv
 
Регистрация: 25.07.2009
Сообщений: 6

рони,
Вот так выглядит поведение скролла.



При переходе от одного блока к другому, окно подпрыгивает к координатам блока, по которому начался скролл, а нужно, чтобы при переходе от одного блока к другому этого скачка не было.
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2021, 20:49
osv osv вне форума
Новичок на форуме
Отправить личное сообщение для osv Посмотреть профиль Найти все сообщения от osv
 
Регистрация: 25.07.2009
Сообщений: 6

рони,
Перезалил запись, может быть что-то прояснится.
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2021, 21:18
osv osv вне форума
Новичок на форуме
Отправить личное сообщение для osv Посмотреть профиль Найти все сообщения от osv
 
Регистрация: 25.07.2009
Сообщений: 6

Сообщение от рони Посмотреть сообщение
??? это о чём?
В предыдущем посте выложил гифку с поведением скроллов. Спасибо за HTML RUN.
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2021, 21:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

osv,
на всякий случай

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2021, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

osv,
гифку я не вижу, проблему вашу не понимаю, макет вы сделали, это замечательно, другим это поможет лучше понять ваш вопрос, я ничем более, пока, помочь не могу.
Ответить с цитированием
  #7 (permalink)  
Старый 20.01.2021, 22:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #8 (permalink)  
Старый 20.01.2021, 23:40
osv osv вне форума
Новичок на форуме
Отправить личное сообщение для osv Посмотреть профиль Найти все сообщения от osv
 
Регистрация: 25.07.2009
Сообщений: 6

При скролле div с классом block, должен одновременно скролится div с классом main, в который вложено несколько div block. У меня при скролле одного div block, все работает нормально, пока не начинается сколл другого div block. В этот момент происходит перескакивание block main к верху экрана, т. к. у нового div block другое расстояние scrollTop. Как то так. Надеюсь, что-то прояснил.
Ответить с цитированием
  #9 (permalink)  
Старый 20.01.2021, 23:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от osv
Надеюсь, что-то прояснил.
...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Верстка нескольких картинок при выборе tovarz Элементы интерфейса 11 05.12.2020 18:19
Запрет скролла при выезде модального окна vettel jQuery 1 15.10.2015 18:15
Javascript-driven анимация, зависящая от скролла страницы пользователем factory_girl Events/DOM/Window 4 06.06.2014 15:23
Прогресс бар для загрузки нескольких файлов через XHR Ваяс AJAX и COMET 0 04.12.2013 13:03
Обработка и использование значения сдвига горизонтального скролла LostSenSS Events/DOM/Window 5 05.09.2011 18:24