-
-
Save nimaxin/758c83f66c0084e66074c19c5e1fdd13 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta | |
name="viewport" | |
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" | |
/> | |
<script src="https://telegram.org/js/telegram-web-app.js"></script> | |
<style> | |
/* */ | |
*, | |
*::after, | |
*::before { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
html { | |
background-color: "red"; | |
} | |
body { | |
position: fixed; /* required */ | |
bottom: 0; /* required */ | |
width: 100%; /* required */ | |
height: 100vh; /* required */ | |
background-color: blue; | |
} | |
.scrollable { | |
overflow-y: scroll; | |
background-color: green; | |
height: 24rem; | |
font-size: 2rem; | |
margin: 1rem; | |
} | |
.scrollable div { | |
padding: 1rem; | |
border: 1px solid black; | |
} | |
.status { | |
padding: 1rem; | |
border: 1px solid black; | |
background-color: white; | |
margin: 1rem; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="status">Collapse: Released</div> | |
<div class="scrollable"> | |
Scrollable Content | |
<div>1</div> | |
<div>2</div> | |
<div>3</div> | |
<div>4</div> | |
<div>5</div> | |
<div>6</div> | |
<div>8</div> | |
<div>9</div> | |
<div>10</div> | |
<div>11</div> | |
<div>12</div> | |
<div>13</div> | |
<div>14</div> | |
<div>15</div> | |
<div>16</div> | |
<div>17</div> | |
<div>18</div> | |
<div>19</div> | |
<div>20</div> | |
<div>21</div> | |
<div>22</div> | |
<div>23</div> | |
<div>24</div> | |
<div>25</div> | |
<div>26</div> | |
<div>27</div> | |
<div>28</div> | |
<div>29</div> | |
<div>30</div> | |
<div>31</div> | |
<div>32</div> | |
<div>33</div> | |
<div>34</div> | |
<div>35</div> | |
<div>36</div> | |
<div>37</div> | |
<div>38</div> | |
<div>39</div> | |
<div>40</div> | |
<div>41</div> | |
<div>42</div> | |
<div>43</div> | |
<div>44</div> | |
<div>45</div> | |
<div>46</div> | |
<div>47</div> | |
<div>48</div> | |
<div>49</div> | |
<div>50</div> | |
</div> | |
<script> | |
window.Telegram.WebApp.expand(); | |
const num = 9999; | |
const scrollable = document.querySelector(".scrollable"); | |
const status = document.querySelector(".status"); | |
// The preventCollapse function should be called when the scrollable content scrollTop is not equal to zero. | |
function preventCollapse() { | |
document.documentElement.style.marginTop = num + "px"; | |
document.documentElement.style.height = window.innerHeight + num + "px"; | |
document.documentElement.style.overflow = "hidden"; | |
window.scrollTo(0, num); | |
} | |
// The allowCollapse function should be called when the scrollable content is finished being touched. | |
// Do not use this function if you want to lock the mini app completely on scroll. | |
function allowCollapse() { | |
document.documentElement.style.marginTop = "auto"; | |
document.documentElement.style.height = "auto"; | |
document.documentElement.style.overflow = "auto"; | |
} | |
document.body.addEventListener("touchstart", function () { | |
if (scrollable.scrollTop !== 0) { | |
preventCollapse(); | |
document.body.style.backgroundColor = "red"; | |
status.innerText = "Collapse: Locked"; | |
} | |
}); | |
scrollable.addEventListener("touchend", function () { | |
allowCollapse(); | |
document.body.style.backgroundColor = "blue"; | |
status.innerText = "Collapse: Released"; | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment