我在一个父 div 中有一堆 div,其中这个父 div 允许水平滚动。
我设置了一些 jQuery 以在单击这些子 div 时更新它们的外观。这对于加载时可见的前几个 div(即没有滚动)效果很好。然而,在移动设备上,对于需要水平滚动才能看到的 div,我可以看出 jQuery 确实识别了发生的点击,但外观的变化是不可见的(例如,在下面的示例代码中,span 元素的文本不可见似乎有所改变)。我发现,如果我从父 div 中删除“-webkit-overflow-scrolling: touch”属性,那么它就可以正常工作(尽管滚动体验当然不是那么好,所以理想情况下我想要两全其美)
下面是指示性代码。移动版 Chrome 和 Safari(在 iOS 上)都会出现此问题。感谢您的帮助!
<style>
.hori-scroll {
white-space: nowrap;
overflow-x:auto;
/*-webkit-overflow-scrolling: touch;*/
-ms-overflow-style: -ms-autohiding-scrollbar;
}
</style>
<div class='hori-scroll'>
<div class='child'>
<span class='grandchild'></span>
</div>
</div>
<script>
$('.child').click(function(){
$(this).find('.grandchild').text('changed');
});
</script>
最佳答案
刚刚发现将这个 CSS 应用于子元素可以消除这个问题:
-webkit-transform: translate3d(0,0,0)
关于javascript - -webkit-溢出-滚动 : touch causes jQuery dynamic changes to not show?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48596326/