-webkit-overflow-scrolling：触摸导致 jQuery 动态更改不显示？答案

【问题标题】：-webkit-overflow-scrolling: touch causes jQuery dynamic changes to not show?-webkit-overflow-scrolling：触摸导致 jQuery 动态更改不显示？
【发布时间】：2018-07-13 18:14:30
【问题描述】：

我在一个父 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>

【问题讨论】：

标签： javascript jquery css mobile

【解决方案1】：

刚刚发现将这个 CSS 应用到子元素上可以消除这个问题：

-webkit-transform: translate3d(0,0,0)

【讨论】：