当你向上滚动以显示内容时,如何防止离子滑动“弹回”?

时间:2015-12-02 21:30:11

标签: javascript ionic-framework ionic

http://codepen.io/leongaban/pen/yeBjWx

enter image description here

请注意,请尝试滚动列表以显示底部的内容。一旦你放开鼠标,列表就会滚动或者更确切地说是“橡皮筋”,再次隐藏内容。

标记

<ion-content>
  <div class="social-stream-container">
    <ion-scroll direction="y" id="social-tweets">
      <ion-list>
        <ion-item class="social-content-block" ng-repeat="t in tweets | filter: orderBy">
          {{t}}
        </ion-item>
      </ion-list>
    </ion-scroll>
  </div>
</ion-content>

样式(内容框有一定高度,因此用户需要能够滚动才能看到更多内容)

.social-stream-container {
  overflow: hidden;
  height: 187px;
  background: cyan;
}

我尝试将其添加到ion-scrollhas-bouncing="false"但是停止了任何类型的滚动。

1 个答案:

答案 0 :(得分:0)

以下是修正:http://codepen.io/leongaban/pen/yeBWWB

删除了$("input[type=button]").on("click", function() { log("Clicked"); }); log("With an id selector:"); $('[id="10/12/2015"]').click(); log("With getElementById:"); $(document.getElementById("10/12/2015")).click(); log("With escaped 1 and slashes:"); $("#\\31 0\\2f 12\\2f 2015").click(); log("With escaped 1 and the other kind of escaped slashes:"); $("#\\31 0\\/12\\/2015").click(); function log(msg) { $("<p>").text(msg).appendTo(document.body); }类的div,然后将该类放在[id="10/12/2015"] { color: blue; } #\31 0\2f 12\2f 2015 { border: 1px solid black; } #\31 0\/12\/2015 { font-size: 20px; } /* Proof that the one starting with 1 is invalid: */ #10\/12\/2015 { text-decoration: line-through; }元素上。

<p>Note that the button has blue text, a black border, and a 20px font. Those are applied by three diffent CSS rules, using the various selectors described in the answer. Note that it <em>isn't</em> strikethrough, proving that a selector starting with 1 is invalid.</p>
<input type="button" id="10/12/2015" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>