关于文字图片滚动插件滚动失效的问题

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提

项目中有个地方需要实现文字无缝滚动的效果。如下图所示：
于是负责该项目的后台开发人员，就在 jQuery插件库里面随便找了一个滚动插件来使用：图片文字滚动插件jQuery Scrollbox（点击查看）
他之前使用该插件的时候，文字是可以正常滚动的，只是后来因为样式问题需要我前端来调整。
然后，我就在他电脑上进行调试，调试了一半中途有事离开了。第二天他人没在，我就在另一个后台开发人员的电脑上进行调试。【此时，问题就出现了。】

问题再现

只是调整了HTML结构，并且修改了CSS样式。然后运行发现：文字无法滚动了。

真奇怪，滚动效果居然莫名其妙就消失了。运行环境：Chrome浏览器

打断点调试，并没有发现异常。原因：插件的初始化方法被调用了，说明正常执行了，也进入了方法内部。

解决方法

可能是CSS样式导致的问题。【样式设置正确，与样式无关】
可能是scrollBox插件的问题。【换插件后依然无法滚动】

注：

上周五，被这个问题困扰了一整天，一直未解决。
终于在今天（周一）下午被解决了，但也是花费了半个下午的时间。
上午，自己引用滚动插件写了一些文字滚动的demo，均测试正常，一点问题没有。【这就证实绝对不是插件的问题】
下午，就信心满满的在他电脑进行调试和改写，认为肯定能改好，可能是之前那些疏漏了什么细节导致的。【然而问题还是重现了】

之前我在另一个人的电脑上调试时都没问题。偏偏这个电脑出问题了。而且之前一直都是使用 Chrome浏览器 测试，所以我后来提议：要不换个浏览器试一试？说不定你这个谷歌浏览器有问题。

最后在火狐浏览器测试，发现文字滚动正常。换了其他浏览器。也可以正常显示。【果然是谷歌浏览器的问题】

那么，具体是什么问题呢？

问题根源

是浏览器的页面缩放比例问题。

在浏览器中，我们可以使用快捷键 Ctrl + + 或者 Ctrl + 滚轮 调整页面的缩放比例。【一般我们不会去特意这么设置的，除非是因为大屏幕预览方便自己特意设置了页面比例或者是误触了快捷键导致的】

因为他的显示器是 DELL 的 23.8英寸 2K高分辨率旋转升降 IPS屏，比我15.6寸的笔记本屏幕大多了。他为了网页看起来更舒服，而不至于整个页面显示过于庞大。特意调整了谷歌浏览器的页面缩放比例，而且这个调整是缩小(-) 而不是放大(+)。
这一波操作就导致了页面内的文字滚动效果失效，无法正常滚动。当调整为正常的100%页面缩放比例时，页面内的文字滚动效果恢复了正常。【终于能够正常显示了】

页面效果图

这里写图片描述

经过本地测试：放大页面比例不会导致文字滚动异常的问题，缩小页面比例至一定的程度（75%及以下）会导致文字滚动失效。

示例demo

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片文字滚动插件</title>
    <!--其中，使用了 bootstrap表格 -->
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .scroll-area{
            width:500px;
            padding:10px;
            margin:20px auto;
        }
        .scroll-table>thead>tr>th{
            border-bottom:none;
        }
        .scroll-text{
            height: 200px;
            margin:0 auto;
            padding:20px 10px;
            border:1px solid #ddd;
            border-top:0;
            background-color:#f3f3f3;
            overflow: hidden;
            margin-top: -20px;
        }
        .scroll-text ul{
            /*height:500px;*/
            overflow: hidden;
        }
        ul,li{
            margin:0;
            padding:0; 
            list-style:none;
        }
        ul li{
            width:90%;
            height:30px;
        }
    </style>
</head>
<body>
    <div class="scroll-area">
        <table class="table table-bordered table-hover scroll-table">
            <thead>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
                <th>标题4</th>
                <th>标题5</th>
            </thead>
        </table>
        <div id="demo2" class="scroll-text">
            <ul>
                <li><a href="javascript:void(0)" target="_blank">jquery轻量级上下(左右)滚动条插件及使用方法</a></li>
                <li><a href="javascript:void(0)" target="_blank">jquery多图tab标签切换焦点图</a></li>
                <li><a href="javascript:void(0)" target="_blank">jquery鼠标悬停动态显示按钮效果</a></li>
                <li><a href="javascript:void(0)" target="_blank">js模拟淘宝首页缓冲幻灯片效果</a></li>
                <li><a href="javascript:void(0)" target="_blank">js模拟土豆官网右下角广告导航菜单</a></li>
                <li><a href="javascript:void(0)" target="_blank">js模拟QQ震动效果</a></li>
                <li><a href="javascript:void(0)" target="_blank">天猫官方网站左侧二级导航菜单</a></li>
                <li><a href="javascript:void(0)" target="_blank">jquery自定义鼠标滚动条样式</a></li>
                <li><a href="javascript:void(0)" target="_blank">跟随鼠标在图片之间不断切换的透明遮罩效果</a></li>
            </ul>
        </div>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://www.jq22.com/demo/jQuery-Scrollbox-150201211931/js/jquery.scrollbox.js"></script>
    <script>
        $("#demo2").scrollbox({
            linear: true,
            step: 1,
            delay: 0,
            speed: 100
        });
    </script>
</body>
</html>