Wordpress中垂直滾動溢出div

我想要讓div在我的Wordpress安裝中通過一些li元素垂直滾動 - 我是一個認真的業餘愛好者，但是在閱讀完jQuery/javascript後論壇整天在這裏，我想我會檢查並看看有經驗的人是否可以幫助我。Wordpress中垂直滾動溢出div

我發現了很多很棒的解決方案，但它們中的每一個似乎都與另一個jQuery或JavaScript實例衝突。

理想情況下，我想要懸停時可以滾動的東西，但我會選擇按鈕，甚至只是簡單地隱藏醜陋的滾動條。

我正在瀏覽的網頁是在這裏：http://ryanlinstrom.com/sandbox/vimeo-test/

我在頁面上使用下面的腳本 - 如果有任何的方式來整合，使我的#thumbs DIV可以在不添加另一個腳本的滾動那會很棒。

 var apiEndpoint = 'http://vimeo.com/api/v2/'; 
    var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json' 
    var oEmbedCallback = 'switchVideo'; 
    var videosCallback = 'setupGallery'; 
    var vimeoUsername = 'user677763'; 

    // Get the user's videos 
    $(document).ready(function() { 
     $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback); 
    }); 

    function getVideo(url) { 
     $.getScript(oEmbedEndpoint + '?url=' + url + '&width=780&height=435&callback=' + oEmbedCallback); 
    } 

    function setupGallery(videos) { 

     // Sets the video title 
     $('#stats h2').text(videos[0].title); 

     // Load the first video 
     getVideo(videos[0].url); 


     // Add the videos to the gallery 
     for (var i = 0; i < videos.length; i++) { 
      var html = '<li><a href="' + videos[i].url + '" name="'+ videos[i].title +'"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />'; 
      html += '</a><p>' + videos[i].title + '</p></li>'; 
      $('#thumbs ul').append(html); 
     } 


     // Switch to the video when a thumbnail is clicked 
     $('#thumbs a').click(function(event) { 
      event.preventDefault(); 
      getVideo(this.href); 
      $('#stats h2').detach(); 
      var title = $(this).attr("name"); 
      $('#stats').append('<h2></h2>'); 
      $("#stats h2").text(title); 

      return false; 
     }); 

    } 

    function switchVideo(video) { 
     $('#embed').html(unescape(video.html)); 
    }

來源

2012-06-03 user1433097

我建議使用兩個覆蓋不可見的div（頂部一個，底部一個）。

然後做這樣的事情：

$(".top-scroll").bind("mouseover", function(){ 
    $(".wrapping-div").animate({scrollTop: -= 5}, 100) 
}); 

$(".bottom-scroll").bind("mouseover", function(){ 
    $(".wrapping-div").animate({scrollTop: += 5}, 100); 
});

然後，當然，加入overflow:hidden你的CSS刪除滾動條。

來源

2012-06-03 03:07:32 ahren

Wordpress中垂直滾動溢出div

回答

相關問題