时间戳

首页 > 解决方案 > 当用户在触摸屏上向下滚动时，如何防止页面重新加载

javascript - 当用户在触摸屏上向下滚动时，如何防止页面重新加载

问题描述

当用户从页面顶部向下滚动以获取更多内容时，页面会重新加载。当没有其他内容可以向下滚动时，就会发生这种情况。 这是 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;
}

标签： javascriptcssscrollpage-refresh

解决方案

推荐阅读