0

我正在使用本网站中看到的平滑 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非常感谢。

4

2 回答 2

3

尝试在其他脚本之前加载 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/

于 2012-06-27T18:01:13.230 回答
0

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

根据“文档”：

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>

于 2012-06-27T18:02:59.063 回答