Question

我正在使用此站点中显示的平滑div卷轴：http://www.smoothdivscroll.com/。

由于某种原因，它不起作用，我不知道为什么。我得到的只是一页不滚动的锚定图像。这是我的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>

这是我的剧本：

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script src="jquery.min.js" type="text/javascript"></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：

a img {border: none; }

#makeMeScrollable
{
    width:75%;
    height:60px;
    position: relative;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}
  #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;
    }

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

更新

以下是我的代码JsFiddle 非常感谢。

Answer 1

尝试在其他脚本之前加载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评论只是/*而*/不是<!--/*

/* 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. */

更新：

你错过了一些（显然至关重要的）css：

http://jsfiddle.net/9HstK/2/

Answer 2

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

根据“documentation”：

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>

<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>

不知道为什么我的jquery smooth div scroll无法正常工作

2 个答案: