Question

我正在开发一个单页网站。滚动/浏览网站的方式是通过javascript工作的自定义“滑块”。但问题是，页面没有按原样滑动。

有时，当您加载页面时，它会开始集中在它的中间。除此之外，有时当你滑动时，页面根本不会滑动，有时它不会向后滑动（等等）。

预览网址：http://edu.serialshop.nl/ivproject/achtergrond.htm

<!doctype html>
<html>
<head>
<title>Skullcandy mediacollege</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<style>
body{
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    background-color: #3D3B3C;
}

.absolute{
    position: fixed;
    left: 20px;
    bottom: 75px;
    height: 233px;
    width: 255px;
}

body {
    overflow-x: hidden;
}
</style>
<script>
var pageSize = 1;
$(function(){
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td></td>"); 
    pageSize=$body.width();
    console.log($body.width());
});

function customScroll(amount)
{
    console.log("scrolleft: " + document.body.scrollLeft + " amount: " + amount);
    document.body.scrollLeft+=amount/10;
}
</script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.1-beta2.js"></script>
<script>
$(document).ready(function(){
    $(window).bind('resize',function() {
        window.location.href = window.location.href;
    });
});
</script>
</head>
<body onload="javascript:window.location.href='#bottom'">
    <div id="map">
        <img src="images/achtergrond.jpg" width="3568" height="800" id="achtergrond" usemap="#m_achtergrond" alt="" />
        <img class="absolute" src="images/skelet.png" alt="skullcandy logo op een skateboard">
        <map name="m_achtergrond" id="m_achtergrond">
            <area shape="rect" coords="3142,0,3418,636" href="#" alt="Review" />
            <area shape="rect" coords="1957,0,2230,635" href="#" alt="Muziek" />
            <area shape="rect" coords="769,0,1039,636" href="#" alt="About us" />
            <area shape="rect" coords="-2,4,295,640" href="#" alt="Over skullcandy" />
        </map>
    </div>
    <div id="slider" style="position:fixed; margin-left:30%; margin-top:-10%;"></div>
    <script>
      var stage = new Kinetic.Stage({
        container: 'slider',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var rectHeight = 50;
      var rectWidth = 200;
      var rectY = (stage.getHeight() - rectHeight) / 2;

      var hbox = new Kinetic.Text({
        x: -10,
        y: 70,
        fontSize: 24,
        fontFamily: 'Calibri',
        text: 'slider',
        fill: 'white',
        padding: 15,
        draggable: true,
        dragBoundFunc: function(pos) {
            customScroll(pos.x);
          return {
            x: pos.x,
            y: this.getAbsolutePosition().y
          }
        }
      });

      layer.add(hbox);
      stage.add(layer);

    </script>
    <span id="bottom">
    </span>
</body>
</html>

Answer 1

Uncaught ReferenceError: $body is not defined : /ivproject/achtergrond.htm:32

将$body更改为$('body')或将var $body = $('body');行添加到$(document).ready(function(){});区块。

自定义单页滑块不起作用

1 个答案: