不知道为什么我的jquery平滑div滚动条不工作_Jquery_Smooth Scrolling

不知道为什么我的jquery平滑div滚动条不工作

jquery

不知道为什么我的jquery平滑div滚动条不工作,jquery,smooth-scrolling,Jquery,Smooth Scrolling,我正在使用平滑div滚动条，如本网站所示：由于某种原因，它不起作用，我不知道为什么。我得到的只是一页锚定的图片，不会滚动。这是我的HTML： <div id="makeMeScrollable"> <div class="scrollingHotSpotLeftVisible"></div> <div class="scrollingHotSpotRightVisible"></div> <div class="scrollW

我正在使用平滑div滚动条，如本网站所示：

由于某种原因，它不起作用，我不知道为什么。我得到的只是一页锚定的图片，不会滚动。这是我的HTML：

<div id="makeMeScrollable">
<div class="scrollingHotSpotLeftVisible"></div>
<div class="scrollingHotSpotRightVisible"></div>
<div class="scrollWrapper">
    <div class="scrollableArea">
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
    </div>
</div>

我想这可能是我忽略或没有看到的非常简单的事情，但已经有一段时间了，我还没有抓住它

更新

这是我的密码

非常感谢。

尝试在其他脚本之前加载jquery：

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

更新：

您缺少了一些显然至关重要的css：

尝试在其他脚本之前加载jquery：

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

更新：

您缺少了一些显然至关重要的css：

根据您的代码片段和该网站上提供的示例，您的结构似乎有误

根据：

Smooth Div Scroll在创建滚动条时添加元素。这些元素被赋予CSS类。在大多数情况下，你不需要改变这些-只需使用默认值即可

代码段中显示您正在手动创建这些元素。创建滚动条时会添加这些元素

<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />

<!-- Styles for my specific scrolling content -->
<style type="text/css">
    #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

    #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
</style>

根据您的代码片段和该网站上提供的示例，您的结构似乎有误

根据：

Smooth Div Scroll在创建滚动条时添加元素。这些元素被赋予CSS类。在大多数情况下，你不需要改变这些-只需使用默认值即可

代码段中显示您正在手动创建这些元素。创建滚动条时会添加这些元素

<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />

<!-- Styles for my specific scrolling content -->
<style type="text/css">
    #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

    #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
</style>

我可以试试。我没有太多使用JSFIDLE，所以我真的不知道如何包含我的机器本地的东西。我现在创建的这个页面对于我的机器来说是本地的，只是为了看看它是否工作，所以它包含了存储在本地计算机中的jQuery文件。@arthur.e.anderson我已经用网站或滚动条中的css进行了更新，它工作了fine@AdamMerrifield,我刚才说的.CSS文件中缺少的重要CSS不是吗？我可以试试。我没有太多使用JSFIDLE，所以我真的不知道如何包含我的机器本地的东西。我现在创建的这个页面对于我的机器来说是本地的，只是为了看看它是否工作，所以它包含了存储在本地计算机中的jQuery文件。@arthur.e.anderson我已经用网站或滚动条中的css进行了更新，它工作了fine@AdamMerrifield,我说的时候包含的.CSS文件中没有重要的CSS，这不是吗？对不起，我不明白。我的结构哪里有问题？@arthur.e.anderson-您是否手动指定代码片段中所示的其他滚动元素？唯一应该手动指定的元素是父div makeMeScrollable。对不起，我不明白。我的结构哪里有问题？@arthur.e.anderson-您是否手动指定代码片段中所示的其他滚动元素？唯一应该手动指定的元素是父div makeMeScrollable。

<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />

<!-- Styles for my specific scrolling content -->
<style type="text/css">
    #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

    #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
</style>

<div id="makeMeScrollable">
    <img src="images/demo/field.jpg" alt="Demo image" id="field" />
    <img src="images/demo/gnome.jpg" alt="Demo image" id="gnome" />
    <img src="images/demo/pencils.jpg" alt="Demo image" id="pencils" />
    <img src="images/demo/golf.jpg" alt="Demo image" id="golf" />
    <img src="images/demo/river.jpg" alt="Demo image" id="river" />
    <img src="images/demo/train.jpg" alt="Demo image" id="train" />
    <img src="images/demo/leaf.jpg" alt="Demo image" id="leaf" />
    <img src="images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>

<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG 
     That way the browser will have loaded the images
     and will know the width of the images. No need to
     specify the width in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

<!-- Smooth Div Scroll 1.2 minified-->
<script src="js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>

<!-- If you want to look at the uncompressed version you find it at
     js/jquery.smoothDivScroll-1.2.js -->


<!-- Plugin initialization -->
<script type="text/javascript">
    // Initialize the plugin with no custom options
    $(document).ready(function () {
        // None of the options are set
        $("div#makeMeScrollable").smoothDivScroll({});
    });
</script>