як отримати правильний зсув елемента?

85

Це, мабуть, справді просте запитання, але як я можу отримати правильний зсув елемента в jQuery?

Я можу зробити:

$("#whatever").offset().left;

і це дійсно.

Але, здається, що:

$("#whatever").offset().right

не визначено.

Отже, як це зробити в jQuery?

Дякую!!

jquery offset

— Алекс
джерело

160

Алекс, Гері:

За запитом, ось мій коментар, розміщений як відповідь:

var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Дякую що дали мені знати.

У псевдокоді, який може бути виражений як:

Правильний зсув:

Ширина вікна МІНУС
( зміщення елемента вліво ПЛЮС зовнішньої ширини елемента )

— Брендон Кроуфорд
джерело

це не працює з перетвореннями CSS, на зміщення вплине перетворення, але externalWidth (і ширина) не буде.

— Джонатан.

2

Це зміщення з правого боку вікна. Щодо зміщення лівого боку вікна див. Відповідь cdZ .

— Codebling

крайній правий край елемента можна знайти більш «споконвічно» $whatever[0].getBoundingClientRect().right. це відносно лівого краю вікна.

— пстантон,

Дякую Брендон. Корисна відповідь.

29

var $whatever        = $('#whatever');
var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

Посилання: .outerWidth ()

— jAndy
джерело

1

я думаю, що їх потрібно додати, а потім мінус 1. якщо ширина 2, то ліво 10, а праве не 12, а 11.

— нонополярність

31

Це неправильна відповідь. У CSS "ліворуч" означає "зміщення самої лівої точки елемента зліва від вікна / батьківського елемента", а "праворуч" означає "зміщення самої правої точки елемента праворуч від вікна / батьківського елемента" ". Отже, правильною буде відповідь:var rt = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));

— Брендон Кроуфорд

5

@BrendonCrawford Ви повинні перемістити цей коментар до відповіді.

— Гері,

3

Примітка кожному, хто проходить - відповідь вище відредаговано, щоб правильно відображати коментар, зроблений Брендоном.

— Кріс Марасті-Георг

16

Можливо, я неправильно розумію ваше запитання, але зміщення має дати вам дві змінні: горизонтальну та вертикальну. Це визначає положення елемента. Отже, що ви шукаєте:

$("#whatever").offset().left

і

$("#whatever").offset().top

Якщо вам потрібно знати, де знаходиться правильна межа вашого елемента, тоді вам слід використовувати:

$("#whatever").offset().left + $("#whatever").outerWidth()

— Грег
джерело

9

Лише доповнення до того, що сказав Грег:

$ ("# what"). offset (). left + $ ("# whatever"). externalWidth ()

Цей код отримає правильне положення щодо лівого боку. Якщо метою було отримати правильну бічну позицію відносно правої (наприклад, при використанні rightвластивості CSS ), тоді додавання до коду необхідно наступним чином:

$ ("# parent_container"). innerWidth () - ($ ("# whatever"). offset (). left + $ ("# whatever"). externalWidth ())

Цей код корисний в анімаціях, де вам потрібно встановити праву сторону як фіксовану прив'язку, коли ви не можете спочатку встановити rightвластивість у CSS.

— cdZ
джерело

6

Насправді вони працюють лише тоді, коли вікно взагалі не прокручується з верхнього лівого положення.
Вам потрібно відняти значення прокрутки вікна, щоб отримати зсув, корисний для перестановки елементів, щоб вони залишалися на сторінці:

var offset = $('#whatever').offset();

offset.right = ($(window).width() + $(window).scrollLeft()) - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = ($(window).height() + $(window).scrollTop()) - (offset.top + $('#whatever').outerHeight(true));

— jrosen
джерело

5

Існує власний API DOM, який досягає цього нестандартно - getBoundingClientRect:

document.querySelector("#whatever").getBoundingClientRect().right

— Барні
джерело

2

Але getBoundingClientRect повертає відносно області перегляду, а не відносно документа, що забезпечує offset ().

— Сай Дуббака,

4

Брендон Кроуфорд мав тут найкращу відповідь (у коментарі), тому я буду перекладати її на відповідь, доки він не дасть (і, можливо, трохи розширювати).

var offset = $('#whatever').offset();

offset.right = $(window).width() - (offset.left + $('#whatever').outerWidth(true));
offset.bottom = $(window).height() - (offset.top + $('#whatever').outerHeight(true));

— Гері
джерело

2

Отримання точки опори div/table (left) = $("#whatever").offset().left;- добре!

Отримати опорну точку a div/table (right)ви можете за допомогою наведеного нижче коду.

 $("#whatever").width();

— hyp3r byt3
джерело

як отримати правильний зсув елемента? - jQuery