CSSスタイルによる横スクロールの方法position:fixed_jquery

CSSスタイル「position:fixed」を使用すると、divブロックを固定位置に固定することができ、スクロールバーがあっても位置が変わりません。 Position:fixed は多くの開発者に素晴らしい効果をもたらしましたが、水平スクロール バーが表示されると、その効果はそれほど簡単には受け入れられません。場合によっては、水平スクロール バーが表示されるときに、div ブロックがスクロール バーとともに左右に移動して、垂直方向の固定位置 (固定) と水平方向の相対位置 (絶対) を実現できることを期待します。この記事では解決策を提供し、jquery 拡張機能のソース コードを添付します。

この記事の実装方法は、スクロールバーで横スクロールするdivブロックをjsで制御するというもので、原理はwindowオブジェクト内でscrollイベントやresizeイベントが発生した際に左か右に移動するというものです。 divブロックの値を相対的に見えるように更新します。モニターの左右の位置がリアルタイムに変化します。 div ブロックは、必要に応じて、position:fixed スタイルで変更されます。

div ブロックがブラウザーの右側に対して水平方向に固定されている場合、ウィンドウ オブジェクトでスクロールまたはサイズ変更イベントが発生すると、その右側のスタイル値が更新され、その値は次のようになります。 :

コードをコピー コードは次のとおりです。

var new_right = ($(window) .scrollLeft() $(window).width () - $(document).width()original_right) 'px'

divブロックがブラウザ左側に対して水平方向に固定されている場合次に、ウィンドウ オブジェクトでスクロールまたはサイズ変更イベントが発生すると、その左のスタイル値を更新します。その値は次のようになります:

コードをコピー コードは次のとおりです:

var new_left = (original_left - $(window).scrollLeft()) 'px'

に表示されるoriginal_leftとoriginal_right上記のコードは、元の div ブロックの左と右の値です。完全な jquery 拡張コードは次のとおりです:

コードをコピー コードは次のとおりです:

(function($) {
$.ScrollFixed = function(el, options){
varbase = this;
base.$el = $(el);
base.el = el;
var target =base.$el;
varoriginal_left = parseInt(target.css('left'));
varoriginal_right = parseInt('right');
var _fix_position = function(){
if(base.options.fixed == 'right'){
target.css('right', ($(window).scrollLeft() $(window) ).width() - $(document).width()original_right) 'px');
} else if(base.options.fixed == 'left'){
target.css('left' , (original_left - $ (window).scrollLeft() 'px');

var windowResize = function(){
_fix_position(); };

var windowScroll(){
_fix_position();
};

base.init = function(){
base.options = $。 extend({}, $.ScrollFixed.defaultOptions, options);
$(window).resize(windowResize);
_fix_position(); console.log(base .options.fixed);

base.init()
};

$.ScrollFixed.defaultOptions = { :'left'
};

$.fn.scrollFixed = function(options){
return this.each(function(){
(new $.ScrollFixed(this, options) ));
});
})(jQuery);


コードをコピーします


コードは次のとおりです。


$('#leftsider').scrollFixed({fixed:'left'}); '#rightsider').scrollFixed( {fixed:'right'});