上下滑动时根据motion事件动态调整view高度的实现方法

核心逻辑是监听用户的滑动偏移量，将偏移增量映射为level view的高度变化值，全程需要设置最小高度和最大高度阈值，避免控件超出预设的显示范围。

通用实现步骤 #

• 绑定滑动容器的滚动监听事件
• 记录上一次的滚动位置，计算本次滑动的y轴偏移增量
• 向上滑动时偏移增量为正，增加level view高度；向下滑动时偏移增量为负，减少level view高度
• 对计算得到的新高度做边界限制，确保落在最小/最大高度区间内
• 更新level view的布局参数刷新显示

Android 端实现示例 #

通过NestedScrollView/RecyclerView的滚动监听实现：

// 扩展方法：dp转px
fun Int.dpToPx() = (this * Resources.getSystem().displayMetrics.density).toInt()

// 预设高度阈值
val minLevelHeight = 50.dpToPx()
val maxLevelHeight = 200.dpToPx()
var currentLevelHeight = minLevelHeight

nestedScrollView.setOnScrollChangeListener { _, _, scrollY, _, oldScrollY ->
    // 计算本次滑动偏移量
    val dy = scrollY - oldScrollY
    currentLevelHeight = (currentLevelHeight + dy).coerceIn(minLevelHeight, maxLevelHeight)
    // 更新控件高度
    levelView.updateLayoutParams<ViewGroup.LayoutParams> {
        height = currentLevelHeight
    }
}

iOS 端实现示例 #

通过UIScrollView的代理方法实现：

let minLevelHeight: CGFloat = 50
let maxLevelHeight: CGFloat = 200
var currentLevelHeight: CGFloat = 50
var lastOffsetY: CGFloat = 0
// level view的高度约束，提前在布局中绑定
var levelViewHeightConstraint: NSLayoutConstraint!

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let dy = scrollView.contentOffset.y - lastOffsetY
    lastOffsetY = scrollView.contentOffset.y
    currentLevelHeight += dy
    // 边界限制
    currentLevelHeight = max(minLevelHeight, min(maxLevelHeight, currentLevelHeight))
    levelViewHeightConstraint.constant = currentLevelHeight
    view.layoutIfNeeded()
}

前端实现示例 #

通过页面滚动事件实现：

const minHeight = 50
const maxHeight = 200
let currentHeight = minHeight
let lastScrollTop = 0

const scrollContainer = document.querySelector('.scroll-container')
const levelView = document.querySelector('.level-view')

scrollContainer.addEventListener('scroll', () => {
  const scrollTop = scrollContainer.scrollTop
  const dy = scrollTop - lastScrollTop
  lastScrollTop = scrollTop
  // 计算并限制高度范围
  currentHeight = Math.min(maxHeight, Math.max(minHeight, currentHeight + dy))
  levelView.style.height = `${currentHeight}px`
})

注意如果滑动容器和level view存在嵌套滚动冲突，需要先处理嵌套滚动的事件分发逻辑，避免滑动事件被拦截导致高度变化不跟手。

内容的提问来源于stack exchange，提问作者sunny vishwakarma