如何隱藏滾動條跨瀏覽器不破壞功能

我有一個水平滾動條在使用中，我想繼續使用它，但隱藏滾動條的功能。我不能使用「overflow：hidden」方法，因爲這會破壞JS的功能。有什麼辦法可以滿足所有現代瀏覽器？如何隱藏滾動條跨瀏覽器不破壞功能

$j = jQuery.noConflict(); 

var $panels = $j('#primary > #main > article'); 
var panelLeftsArray = $panels.map(function() { 
    return ($j(this).position().left); 
}).get(); 

var len = panelLeftsArray.length; 
var getCurrentSectionIndex = function (left) { 
    for (var i = 0; i < len; i++) { 
     if (left >= panelLeftsArray[i] && left < panelLeftsArray[i + 1]) { 
      return i; 
     } 
    } 
    return len-1; 
}; 

var index = 0; 

var handler = function() { 
    var position = Math.abs($j('#primary #main').position().left); 
    index = getCurrentSectionIndex(position); 
    console.log(index); 
}; 
var scroll = function(){ 
    $j('#primary').unbind('scroll', handler); 
    $j('#primary').scrollTo('#main article:eq(' + index + ')', 800, { 
     axis: 'x', 
     onAfter: function() { 
      $j('#primary').bind('scroll', handler); 
     } 
    }); 
} 
$j('#primary').bind('scroll', handler); 

$j('.control_next').click(function (e) { 
    console.log(index);  
    if (index < len-1) { 
     index++; 
     scroll(); 
    } 
    return false; 
}); 

$j('.control_prev').click(function (e) { 
    console.log(index); 
    if (index > 0) { 
     index--; 
     scroll(); 
    } 
    return false; 
});

http://jsfiddle.net/Pilgrimish/pB3rB/

來源

2014-03-01 Pilgrimish

如果我理解這個正確的，你想要的滾動條來顯示，但沒有做任何事情，只是觸發滾動事件沒有做真正的滾動，這樣你就可以定位在視一節的開始？

那麼，沒有辦法做到這一點。您不能禁用scsi功能並仍然顯示它。但是，您可以將overflow-x設置爲「隱藏」。在窗口的底部創建一個固定的div，其中包含滾動條的確切高度和瀏覽器窗口的寬度。在它內部，創建一個內部div，其高度爲0，寬度與父文檔相同。你將不得不處理resize事件來調整滾動條div。

然後，將您的滾動處理程序附加到滾動條div的滾動事件，並使用滾動位置手動滾動主文檔。

我在做一些猜測，因爲在你jsfiddle滾動條就像一個普通的滾動條。

來源

2014-03-01 22:33:01

對不起，奧斯卡。這個句子應該是這樣寫的：我有一個使用的水平滾動條，我想繼續使用它（功能上），但隱藏滾動條。 – Pilgrimish

那麼你的意思是你不想看到滾動條，但是你希望'prev'和'next'按鈕像現在一樣工作，在部分之間跳轉？ –

這是正確的。 – Pilgrimish

如何隱藏滾動條跨瀏覽器不破壞功能

回答

相關問題