H5页面在ios中平滑滚动

Posted 2023-04-12

参考技术A -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto : 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
touch : 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

在ios移动端上，在你用 overflow-y:scorll 属性的时候，你会发现滚动时当手指离开屏幕，滚动就会停止，这时候可以使用 -webkit-overflow-scrolling:touch 这个属性，让滚动条产生滚动回弹的效果，就像ios原生的滚动条一样流畅。

在 UITableview 中平滑滚动以显示聊天记录

【中文标题】在 UITableview 中平滑滚动以显示聊天记录

【英文标题】：Smooth Scroll in UITableview to show chat history

【发布时间】：2016-12-02 09:16:20

【问题描述】：

我正在开发聊天应用程序。我有一个视图控制器来在表格视图中显示消息。在选择特定聊天时，我将获取 12 条最近的消息并重新加载表格并将其滚动到底部，以便用户可以看到最近的消息（索引 11）。 当用户开始向上滚动时（当他到达第 0 个索引时），我需要通过 Web 服务获取历史记录并以相同的顺序平滑地显示在 UI 上。

显示单元格的代码

cell = STBubbleTableViewCell.init(style: .Subtitle, reuseIdentifier: cellIdentifier)
cell.backgroundColor = self.chatTableView?.backgroundColor
cell.selectionStyle = .None
cell.dataSource = self
cell.delegate = self

let chat = chatMessages[indexPath.row]

cell.textLabel?.font = UIFont.systemFontOfSize(14.0)
cell.textLabel?.text = chat.message
if(self.isGroupChat)

    cell.detailTextLabel?.text = NSString.init(format: "%@ %@", chat.authorName, chat.messageDate.toShortTimeString()) as String

else

    cell.detailTextLabel?.text = chat.messageDate.toShortTimeString()


cell.authorType = chat.authorType == 0 ? AuthorType.STBubbleTableViewCellAuthorTypeSelf : AuthorType.STBubbleTableViewCellAuthorTypeOther

cell.bubbleColor = chat.bubbleType == 0 ? BubbleColor.STBubbleTableViewCellBubbleColorGreen : BubbleColor.STBubbleTableViewCellBubbleColorGray

获取聊天记录的代码

func scrollViewWillBeginDragging(scrollView: UIScrollView) 

    pointNow = scrollView.contentOffset


func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) 

    if (scrollView.contentOffset.y < pointNow.y)
    
        self.fetchChatHistory()
    

self.fetchChatHistory 被多次调用。如何避免这种多次调用？

【问题讨论】：

你检查了吗？ github.com/jessesquires/JSQMessagesViewController

我没用过JSQMessageViewController。我使用 STTableviewCell 在我的 tableview 中显示消息。

您想通过 scrollViewWillBeginDragging 和 scrollViewDidEndDragging 调用获得什么？

我正在调用网络服务并获取聊天记录

【参考方案1】：

使用 scrollViewWillBeginDragging 和 scrollViewDidEndDragging 调用，您可以在每次滚动时调用 fetching，无论用户没有到达表的末尾。 相反，您需要实现 tableview 无限滚动：

看看：UITableView infinite scrolling