CSS 스타일을 이용한 가로 스크롤 방법 position:fixed_jquery

CSS 스타일 "position:fixed"를 사용하면 div 블록을 고정된 위치에 고정할 수 있으며 스크롤 막대가 있어도 위치가 변경되지 않습니다. position:fixed는 많은 개발자에게 놀라운 효과를 가져왔지만 가로 스크롤 막대가 나타나면 그 효과를 받아들이기가 쉽지 않습니다. 때로는 수평 스크롤 막대가 나타날 때 div 블록이 스크롤 막대와 함께 왼쪽 및 오른쪽으로 이동하여 수직 고정 위치 지정(고정) 및 수평 상대 위치 지정(절대)을 달성할 수 있기를 바랍니다. 이 문서에서는 jquery 확장 소스 코드가 첨부된 솔루션을 제공합니다.

이 글의 구현 방법은 js를 사용하여 div 블록을 스크롤 바와 함께 가로로 스크롤하도록 제어하는 ​​것입니다. 윈도우 객체에서 스크롤 이벤트와 크기 조정 이벤트가 발생할 때 왼쪽 또는 오른쪽으로 스크롤하는 것이 원칙입니다. 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'

위 코드는 원래 div 블록의 왼쪽 및 오른쪽 값입니다. 전체 jquery 확장 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(function($) {
$.ScrollFixed = function(el, options){
var base = this;
base.$el = $(el);
base.el = el;
var target = base.$el;
varorigin_left=parseInt(target.css('left'))
varorigin_right=parseInt(target.css('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 = function(){
_fix_position()
};

base.init = function(){
base.options = $. 확장({}, $.ScrollFixed.defaultOptions, 옵션);
$(window).resize(windowResize);
$(window).scroll(windowScroll)
_fix_position(); console.log(base .options.fixed)
};

base.init()
};

$.ScrollFixed.defaultOptions = {
:'왼쪽'
};

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


사용 예:

코드 복사

코드는 다음과 같습니다. $('#leftsider').scrollFixed({fixed:'left'}) $( '#rightsider').scrollFixed( {fixed:'right'})