Skip to content

Commit 0eb97a1

Browse files
shakyShaneshakyShane
committed
feat(scroll): add scrollElements & scrollElementMapping options to allow scroll sync between any elements
1 parent c170c27 commit 0eb97a1

3 files changed

Lines changed: 132 additions & 2 deletions

File tree

‎lib/default-config.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,27 @@ module.exports = {
286286
*/
287287
scrollRestoreTechnique: "window.name",
288288

289+
/**
290+
* Sync the scroll position of any element
291+
* on the page. Add any amount of CSS selectors
292+
* @property scrollElements
293+
* @type Array
294+
* @default []
295+
*/
296+
scrollElements: [],
297+
298+
/**
299+
* Sync the scroll position of any element
300+
* on the page - where any scrolled element
301+
* will cause all others to match scroll position.
302+
* This is helpful when a breakpoint alters which element
303+
* is actually scrolling
304+
* @property scrollElementMapping
305+
* @type Array
306+
* @default []
307+
*/
308+
scrollElementMapping: [],
309+
289310
/**
290311
* Time, in milliseconds, to wait before
291312
* instruction browser to reload/inject following a
@@ -360,6 +381,7 @@ module.exports = {
360381

361382
clientEvents: [
362383
"scroll",
384+
"scroll:element",
363385
"input:text",
364386
"input:toggles",
365387
"form:submit",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"dependencies": {
3333
"anymatch": "^1.3.0",
3434
"async-each-series": "^0.1.1",
35-
"browser-sync-client": "^2.2.1",
35+
"browser-sync-client": "^2.3.0",
3636
"browser-sync-ui": "^0.5.15",
3737
"chokidar": "^1.0.5",
3838
"connect": "^3.4.0",

‎test/fixtures/scrolling.html‎

Lines changed: 109 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,121 @@
66
<meta name="viewport" content="width=device-width">
77
<title>About us</title>
88
<link rel="stylesheet" href="assets/style.css"/>
9+
<style>
10+
.test {
11+
max-height: 300px;
12+
overflow: scroll;
13+
}
14+
</style>
915
</head>
1016
<body>
1117
<div class="container">
1218
<h1>Browser Sync Ghost Mode: Scrolling</h1>
1319
<a href="index.html">Homepage</a>
1420
<button onclick="scroll()">Scroll</button>
1521

22+
23+
<div class="test">
24+
<p>1</p>
25+
26+
<p>2</p>
27+
28+
<p>3</p>
29+
30+
<p>4</p>
31+
32+
<p>5</p>
33+
34+
<p>6</p>
35+
36+
<p>7</p>
37+
38+
<p>8</p>
39+
40+
<p>9</p>
41+
42+
<p>10</p>
43+
44+
<p>11</p>
45+
46+
<p>12</p>
47+
48+
<p>13</p>
49+
50+
<p>14</p>
51+
52+
<p>15</p>
53+
54+
<p>16</p>
55+
56+
<p>17</p>
57+
58+
<p>18</p>
59+
60+
<p>19</p>
61+
62+
<p>20</p>
63+
64+
<p>21</p>
65+
66+
<p>22</p>
67+
68+
<p>23</p>
69+
70+
<p>24</p>
71+
72+
<p>25</p>
73+
74+
<p>26</p>
75+
76+
<p>27</p>
77+
78+
<p>28</p>
79+
80+
<p>29</p>
81+
82+
<p>30</p>
83+
84+
<p>31</p>
85+
86+
<p>32</p>
87+
88+
<p>33</p>
89+
90+
<p>34</p>
91+
92+
<p>35</p>
93+
94+
<p>36</p>
95+
96+
<p>37</p>
97+
98+
<p>38</p>
99+
100+
<p>39</p>
101+
102+
<p>40</p>
103+
104+
<p>41</p>
105+
106+
<p>42</p>
107+
108+
<p>43</p>
109+
110+
<p>44</p>
111+
112+
<p>45</p>
113+
114+
<p>46</p>
115+
116+
<p>47</p>
117+
118+
<p>48</p>
119+
120+
<p>49</p>
121+
122+
<p>50</p>
123+
</div>
16124
<h1>1</h1>
17125

18126
<h1>2</h1>
@@ -212,4 +320,4 @@ <h1>99</h1>
212320
<h1>100</h1>
213321
</div>
214322
</body>
215-
</html>
323+
</html>

0 commit comments

Comments
 (0)