Question

当我点击overflow: hidden

时，我正在html body jQuery和div

$(".mydiv").on("click", function() {
   $("html, body").css("overflow", "hidden");
});

。

$("html, body").css("overflow", "");

当我这样做时，窗口会转到页面顶部并松开滚动位置。当我这样做时，它会恢复滚动位置：

div

当用户在我之前打开的ALTER TRIGGER [SIR].[TESTTABLE_UPDATE] ON [DBO].[TESTTABLE] AFTER UPDATE AS BEGIN IF (@@ROWCOUNT = 0) return SET NOCOUNT ON; DECLARE @USER VARCHAR(1000) -- this is a function which can gives u current loggined user in case if someone update the data from backend we can get that user name and log it. SET @USER='' SET @USER= (select dbo.GetCurrentUserName()) --this is a filter for bulk update which systemm does and you dont care about it so return if( PATINDEX('%workerprocess%',@USER)>0) return DECLARE @ID INT , @LOGS VARCHAR(MAX) , @FINALLOGS VARCHAR(MAX) DECLARE @ACTION VARCHAR(MAX) SET @ACTION ='' SET @LOGS='' SET @FINALLOGS ='' SELECT @LOGS = DELETED.CHANGELOG FROM DELETED -- individual column that a table contain IF UPDATE([STATECODE]) BEGIN SET @Action += '| StateCode Changed from '+convert(varchar, ( select isnull( [STATECODE],'') FROM deleted )) +' to '+ convert(varchar, ( select isnull( [STATECODE],'') FROM inserted )) +' | ' END -- individual column that a table contain IF UPDATE([FACILITYCODE]) BEGIN SET @Action += '| FacilityCode Changed from '+convert(varchar, ( select isnull( [FACILITYCODE],'') FROM deleted )) +' to '+ convert(varchar, ( select isnull( [FACILITYCODE],'') FROM inserted )) +' | ' END IF UPDATE([INSTALLATIONCODE]) BEGIN SET @Action += '| InstallationCode Changed from '+convert(varchar, ( select isnull( [INSTALLATIONCODE],'') FROM deleted )) +' to '+ convert(varchar, ( select isnull( [INSTALLATIONCODE],'') FROM inserted )) +' | ' END set @FINALLOGS =' [SIR.INSTALLATIONS Updated On ' + CONVERT(varchar(25), GETDATE()) + @ACTION + ISNULL( @LOGS,'') +' ] ' -- this is my audit table where I am logging everything. INSERT INTO SIR.UserChangeLog (UpdatedBy,ChangeLog) VALUES(@user, @FINALLOGS) END ---- End tirgger ---------外面点击

时会发生这种情况

有任何线索吗？

Answer 1

我会猜测并假设你使用<a href="#">来触发CSS属性的切换。

这将导致页面跳到顶部，除非您主动阻止它发生在javascript上。

示例：

＆＃13;

$('.overflow-toggle').on('click', function(e) {
  e.preventDefault() // prevent '#' navigation
  $("body").toggleClass('overflow-hidden');
});

＆＃13;

.overflow-hidden {
  overflow: hidden;
}
.overflow-toggle {
  position: fixed;
  top: 0;
  right: 0;
  background: #FFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="overflow-toggle">Toggle overflow</a>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>

＆＃13;

以下是没有阻止滚动的示例

＆＃13;

$('.overflow-toggle').on('click', function(e) {
  $("body").toggleClass('overflow-hidden');
});

＆＃13;

.overflow-hidden {
  overflow: hidden;
}
.overflow-toggle {
  position: fixed;
  top: 0;
  right: 0;
  background: #FFF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="overflow-toggle">Toggle overflow</a>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>
<p>
  Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque euismod orci vitae elementum sagittis. Suspendisse id consectetur nibh. Nam efficitur, enim eu molestie pretium, est risus eleifend quam, at fringilla nibh massa nec elit. Suspendisse sollicitudin
  magna at orci placerat, ut fermentum tellus aliquam. Praesent a erat nec tortor pulvinar malesuada. Pellentesque mollis feugiat ligula, quis posuere enim scelerisque bibendum. Sed lacinia sem semper elit consectetur, vel porta eros ornare. Praesent
  ullamcorper euismod odio, sed bibendum odio facilisis sed. Cras elementum vitae lectus ac feugiat. Curabitur eleifend elit tortor, quis blandit eros sollicitudin quis. Vestibulum semper erat et rhoncus volutpat. Sed eget semper lectus.
</p>
<p>
  Cras at turpis consequat, condimentum dui vel, fermentum ligula. Phasellus a lorem vel leo efficitur elementum. Praesent tempus dui vel est placerat lacinia. Suspendisse semper erat sapien, a rhoncus lectus vulputate eget. Proin nec risus lectus. Curabitur
  eget iaculis dolor, nec interdum metus. Donec venenatis tortor nec turpis congue, eleifend accumsan velit aliquet.
</p>
<p>
  In sed pharetra arcu. Sed cursus et nibh quis porta. Fusce viverra placerat erat. Fusce sollicitudin tortor id mauris varius tempus. Integer fringilla nisi orci, id rhoncus tellus condimentum in. Nulla blandit imperdiet felis at venenatis. Aenean lectus
  elit, pretium quis erat id, tincidunt malesuada eros. Vestibulum nec orci faucibus, finibus nulla ac, posuere felis.
</p>

＆＃13;

我认为没有必要将overflow: hidden同时应用于html 和 body

应用溢出时，窗口会松开滚动位置

1 个答案: