Question

我通过codecanyon.net购买了一些文件，他们在所有浏览器上都运行良好。就在最近，我发现他们没有在Chrome上工作。

代码真的很大，我试图通过js文件的试错来改变一些东西，但是没有成功。您可以在http://miguelsart.com/scroller-test找到滑块。

正如您所看到的，字幕应该是隐藏的，一旦您悬停，它们就会向上滑动。但是使用Chrome时，字幕会自动显示，并且在您悬停时没有任何反应。

我觉得这部分代码有问题：

//init captions
Scroller.prototype.initCaptions = function() {
    var $captions = this._$slides.find(">p:first");
    if (this._displayCaption) {
        var padding = $captions.outerWidth() - $captions.width();
        $captions.css({width:this._slideWidth - padding, display:"inline-block"}).click(preventDefault);
        if (this._captionPos == OUTSIDE) {
            var heights = $captions.map(function() { return $(this).height(); }).get();
            var maxHeight = Math.max.apply(Math, heights);                  
            $captions.css({top:this._captionAlign == TOP ? 0 : this._slideHeight, height:maxHeight});

            this._extHeight = $captions.outerHeight();                  
            if (this._captionAlign == TOP) {
                this._extOffset = this._extHeight;
            }
            $captions.addClass("outside");
        }
        else {
            if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 6 && parseInt(jQuery.browser.version) < 9) {
                $captions.addClass("ie-inside");
            }
            else {
                $captions.addClass("inside");
            }
        }                   
    }
    else {
        $captions.hide();
    }
}

我已经尝试过替换显示器以获得不透明度或可见性，但没有任何效果。有没有人知道可能出错的是什么？

提前致谢！

Answer 1

我相信我已经弄明白作者的实施有什么问题，而且你是对的，它与最新版本的Chrome有关。

在jquery.wt.scroller.js的第43行

this._mouseoverCaption = window.Touch ? false : opts.mouseover_caption;

插件的作者正在测试本机触摸功能（通过确定是否定义了window.Touch）。 Chrome必须在最近的版本中添加原生触控API功能。

所以作者的目的是说，你可以将鼠标悬停在触摸设备上，这样我们就无法在触控设备上显示字幕，因此我们可以＃39 ;只是总是向他们展示＆＃39; - 这是逻辑上的。

然而，仅仅因为存在触摸功能，并不意味着触摸输入是默认的（如在这种情况下）。 Modernizr通过执行以下条件解决了这个问题（现在）：

if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {

某事告诉我这也很快就会被打破。（https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L42）

所以，长话短说（太迟了，我知道）将其添加到插件代码中：

将其添加到第7行（将所有行向下推一行）：

var TOUCH = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;

在插件代码中查找并替换所有window.Touch TOUCH {/ p}}。

告诉作者插件我会给他发一张账单。：）

部分Javascript代码在最新的Chrome更新中停止运行

1 个答案: