logo标签列表

垂直的jQuery滑动条不起作用

jqueryuser-interface
4

你好，我使用jQuery制作了一个垂直滑块来实现文本的垂直滑动。当滑块的手柄被移动时，文本确实会上下滚动，但手柄本身却没有移动……我不知道出了什么问题？请有人可以帮帮我吗！！！

以下是代码：

JS：

$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
        orientation: "vertical",
        value: 100,
    change: handleSliderChange,
    slide: handleSliderSlide
  });

});

function handleSliderChange(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollHeight") - $
("#content-scroll").height();
  $("#content-scroll").animate({scrollTop: ui.value * (maxScroll /
100) }, 1000);

}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollHeight") - $
("#content-scroll").height();
  $("#content-scroll").attr({scrollTop: ui.value * (maxScroll /
100) }); 
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
  <script src="jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script>
  <script src="slider_test.js" language="javascript" type="text/javascript"></script>
  <style>
    #main {
      width: 510px;
      margin: 0 auto;
    }

    #content-slider {
      width:4px;
      height:510px;
      margin: 5px;float:left;
      background: #BBBBBB;

    }

    .ui-slider-handle {
      float:left;
      height:10px;width:10px;
      background-color:#03F;
 }

    #content-scroll {
      width: 500px;
      height: 500px;
      margin-top: 10px;
      overflow: hidden;
      border: solid 1px black;
   float:left;
    }

    #content-holder {
      width: 800px;
      height: 270px;
    }

    .content-item {
      width: 490px;
      height: 270px;
      padding: 5px;
      float: left;
   margin:auto 0 0 100px;
  }
  </style>
</head>
<body>
<div id="content-slider"></div>
<div id="content-scroll">
  <div id="content-holder">
    <div class="content-item">
      <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
       <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
       <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
       <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
       <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
       <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p>
      <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p>
    </div>
    </div>


  </div>
</div>
</body>
</html>
1个回答
1
这应该可以解决问题：
 $(document).ready(function(){
      $("#content-slider").slider({
        animate: true,
            orientation: "vertical",
            value: 0,
            range: "max", 
            min: -100, 
            max: 0, 
        change: handleSliderChange,
        slide: handleSliderSlide
      });

    });

    function handleSliderChange(e, ui)
    {
      var maxScroll = $("#content-scroll").attr("scrollHeight") - $
    ("#content-scroll").height();
      $("#content-scroll").animate({scrollTop: ui.value * (maxScroll /
    -100) }, 1000);

    }

    function handleSliderSlide(e, ui)
    {
      var maxScroll = $("#content-scroll").attr("scrollHeight") - $
    ("#content-scroll").height();
      $("#content-scroll").attr({scrollTop: ui.value * (maxScroll /
    -100) }); 
    }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接