Когда пользователь прокручивает страницу сверху вниз, чтобы получить больше контента, вместо этого страница перезагружается. Это происходит, когда нет другого содержимого для прокрутки вниз. Это проблема мобильных браузеров Chrome и Opera . Пример, показанный на этом сайте , именно то, что происходит, и это то, что я пытаюсь предотвратить. Это мой код:
<style id="compiled-css" type="text/css">
body {
overscroll-behavior: contain;
width: 100%;
}
#scroller {
overflow-y:auto;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
bottom:23px;
}
.btn{
height:4.2em;
border-radius:10px;
color: #E5787A;
float:right;
background: #78E5E3;
}
blockquote {
background: #B9DFF1;
padding: 10px 10px 10px 10px;
text-align: justify;
color:#333;
border-radius:15px;
font-size: 1.0em;
font-family:'Josefin Slab Thin';
line-height: 1.6em;
align-text:center;
max-height: 350px;
box-shadow: 4px 4px 10px #78E5E3;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
}
.container-margin {
margin-left: -15px;
margin-right: -15px;
}
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: white;
}
</style>
</head>
<body id="content">
<div id="scroller" class="scroller col-lg-12 col-md-6 col-sm-3 col-xs-6" style="height:450px;width:100%;background-color: white;">
<div class="col-lg-12">
<div class="message right appeared">
<blockquote>
{{=message}}
</blockquote>
</div>
</div>
<div class="col-lg-12">
<div class="message left appeared">
<blockquote>
{{=answer}}
</div>
</div>
</div>
</body>
Я сделал это, но, похоже, не помогает:
<script>
$("#home").click(function()
{
$("#content").load("home.html");
return false;
});
</script>
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}