diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebar.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebar.vue
index e98d4b055..ee170c12d 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebar.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebar.vue
@@ -10,6 +10,7 @@
             v-model:is-viewers-detail-open="isViewersDetailOpen"
             :channel-id="channelId"
             :viewer-ids="viewingUsers"
+            :inactive-viewer-ids="inactiveViewingUsers"
             :pinned-messages-count="pinnedMessages.length"
             @move-to-pinned="moveToPinnedPage"
             @move-to-events="moveToEventsPage"
@@ -30,6 +31,7 @@
     <template #opener>
       <channel-sidebar-hidden
         :viewer-ids="viewingUsers"
+        :inactive-viewer-ids="inactiveViewingUsers"
         @open="openSidebar"
         @open-viewers="openViewers"
       />
@@ -57,6 +59,7 @@ const props = defineProps<{
   isSidebarOpenerReady: boolean
   pinnedMessages: Pin[]
   viewingUsers: UserId[]
+  inactiveViewingUsers: UserId[]
 }>()
 
 const { channelsMap } = useChannelsStore()
diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue
index 8da728d95..a26d79cdc 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue
@@ -3,6 +3,7 @@
     <channel-sidebar-viewers
       v-model="isViewersDetailOpen"
       :viewer-ids="viewerIds"
+      :inactive-viewer-ids="inactiveViewerIds"
       :class="$style.sidebarItem"
     />
     <channel-sidebar-qall
@@ -56,6 +57,7 @@ const props = withDefaults(
   defineProps<{
     channelId: ChannelId
     viewerIds: readonly UserId[]
+    inactiveViewerIds: readonly UserId[]
     pinnedMessagesCount?: number
     isViewersDetailOpen: boolean
   }>(),
diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarHidden.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarHidden.vue
index 8d99f2bb8..43bd49b8b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarHidden.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarHidden.vue
@@ -13,6 +13,7 @@
       count-clickable
       show-count
       :user-ids="viewerIds"
+      :inactive-user-ids="inactiveViewerIds"
       :class="$style.rest"
       @count-click="emit('openViewers')"
     />
@@ -27,6 +28,7 @@ import type { UserId } from '/@/types/entity-ids'
 withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
   }>(),
   {
     viewerIds: () => []
diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewers.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewers.vue
index 7ff71789d..a74227f1e 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewers.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewers.vue
@@ -9,12 +9,14 @@
       direction="row"
       transition="fade-right"
       :user-ids="viewerIds"
+      :inactive-user-ids="inactiveViewerIds"
       @toggle="toggle"
     />
   </sidebar-content-container>
   <channel-sidebar-viewers-detail
     v-else
     :viewer-ids="viewerIds"
+    :inactive-viewer-ids="inactiveViewerIds"
     @toggle="toggle"
   />
 </template>
@@ -31,6 +33,7 @@ import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 const props = withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
     modelValue: boolean
   }>(),
   {
diff --git a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewersDetail.vue b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewersDetail.vue
index 7d1291865..c6e8c3ece 100644
--- a/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewersDetail.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewersDetail.vue
@@ -4,6 +4,14 @@
       <user-icon :user-id="user.id" :size="32" />
       <div :class="$style.userName">{{ user.displayName }}</div>
     </div>
+    <div
+      v-for="user in inactiveUsers"
+      :key="user.id"
+      :class="[$style.item, $style.transparent]"
+    >
+      <user-icon :user-id="user.id" :size="32" />
+      <div :class="$style.userName">{{ user.displayName }}</div>
+    </div>
   </sidebar-content-container>
 </template>
 
@@ -18,9 +26,11 @@ import { useUsersStore } from '/@/store/entities/users'
 const props = withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
   }>(),
   {
-    viewerIds: () => []
+    viewerIds: () => [],
+    inactiveViewerIds: () => []
   }
 )
 
@@ -32,6 +42,9 @@ const { usersMap } = useUsersStore()
 const users = computed(() =>
   props.viewerIds.map(id => usersMap.value.get(id)).filter(isDefined)
 )
+const inactiveUsers = computed(() =>
+  props.inactiveViewerIds.map(id => usersMap.value.get(id)).filter(isDefined)
+)
 </script>
 
 <style lang="scss" module>
@@ -46,6 +59,9 @@ const users = computed(() =>
     margin-bottom: 0;
   }
 }
+.transparent {
+  opacity: 0.5;
+}
 .userName {
   margin-left: 8px;
   font-weight: bold;
diff --git a/src/components/Main/MainView/ChannelView/ChannelView.vue b/src/components/Main/MainView/ChannelView/ChannelView.vue
index b2023ce6e..59006bea5 100644
--- a/src/components/Main/MainView/ChannelView/ChannelView.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelView.vue
@@ -17,6 +17,7 @@
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
         :viewing-users="viewingUsers"
+        :inactive-viewing-users="inactiveViewingUsers"
       />
     </template>
   </primary-view-frame>
@@ -40,5 +41,7 @@ const props = defineProps<{
 
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
-const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+
+const { viewingUsers, inactiveViewingUsers, typingUsers } =
+  useCurrentViewers(channelId)
 </script>
diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
index 90e131e4c..daf5f099b 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
@@ -12,7 +12,7 @@
       @request-load-former="onLoadFormerMessagesRequest"
       @request-load-latter="onLoadLatterMessagesRequest"
       @scroll-passive="handleScroll"
-      @reset-is-reached-latest="resetIsReachedLatest"
+      @window-viewd="onWindowViewd"
     >
       <template #default="{ messageId, onChangeHeight, onEntryMessageLoaded }">
         <messages-scroller-separator
@@ -86,6 +86,9 @@ const {
   onLoadAroundMessagesRequest
 } = useChannelMessageFetcher(scrollerEle, props)
 
+const { unreadChannelsMap, deleteUnreadChannelWithSend } =
+  useSubscriptionStore()
+
 const { messagesMap } = useMessagesStore()
 const firstUnreadMessageId = computed(() => {
   if (!unreadSince.value) return ''
@@ -114,9 +117,17 @@ const messagePinnedUserMap = computed(
   () => new Map(props.pinnedMessages.map(pin => [pin.message.id, pin.userId]))
 )
 
-const { unreadChannelsMap } = useSubscriptionStore()
-const resetIsReachedLatest = () => {
-  if (!unreadChannelsMap.value.get(props.channelId)) return
+const onWindowViewd = () => {
+  const unread = unreadChannelsMap.value.get(props.channelId)
+  if (unread === undefined) return
+  //最後まで読み込まれている時は「ここから未読」の位置を修正し、未読を消す。
+  if (
+    unread.updatedAt ===
+    messagesMap.value.get(messageIds.value.at(-1) ?? '')?.createdAt
+  ) {
+    unreadSince.value = unread.since
+    deleteUnreadChannelWithSend(props.channelId)
+  }
   isReachedLatest.value = false
 }
 
diff --git a/src/components/Main/MainView/DMView/DMSidebar/DMSidebar.vue b/src/components/Main/MainView/DMView/DMSidebar/DMSidebar.vue
index 484a1c56d..3fe84d58d 100644
--- a/src/components/Main/MainView/DMView/DMSidebar/DMSidebar.vue
+++ b/src/components/Main/MainView/DMView/DMSidebar/DMSidebar.vue
@@ -8,6 +8,7 @@
         <template #content>
           <sidebar-content
             :viewer-ids="viewingUsers"
+            :inactive-viewer-ids="inactiveViewingUsers"
             :pinned-messages-count="pinnedMessages.length"
             @move-to-pinned="moveToPinnedPage"
             @move-to-events="moveToEventsPage"
@@ -26,7 +27,11 @@
       />
     </template>
     <template #opener>
-      <channel-sidebar-hidden :viewer-ids="viewingUsers" @open="openSidebar" />
+      <channel-sidebar-hidden
+        :viewer-ids="viewingUsers"
+        :inactive-viewer-ids="inactiveViewingUsers"
+        @open="openSidebar"
+      />
     </template>
   </primary-view-sidebar>
 </template>
@@ -49,6 +54,7 @@ defineProps<{
   isSidebarOpenerReady: boolean
   pinnedMessages: Pin[]
   viewingUsers: UserId[]
+  inactiveViewingUsers: UserId[]
 }>()
 
 const {
diff --git a/src/components/Main/MainView/DMView/DMSidebar/DMSidebarContent.vue b/src/components/Main/MainView/DMView/DMSidebar/DMSidebarContent.vue
index c3ba96a02..19d947ae1 100644
--- a/src/components/Main/MainView/DMView/DMSidebar/DMSidebarContent.vue
+++ b/src/components/Main/MainView/DMView/DMSidebar/DMSidebarContent.vue
@@ -3,6 +3,7 @@
     <channel-sidebar-viewers
       v-model="isViewersDetailOpen"
       :viewer-ids="viewerIds"
+      :inactive-viewer-ids="inactiveViewerIds"
       :class="$style.item"
     />
     <channel-sidebar-pinned
@@ -27,6 +28,7 @@ import { ref } from 'vue'
 withDefaults(
   defineProps<{
     viewerIds: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
     pinnedMessagesCount?: number
   }>(),
   {
diff --git a/src/components/Main/MainView/DMView/DMView.vue b/src/components/Main/MainView/DMView/DMView.vue
index efdf84560..e02f9ea72 100644
--- a/src/components/Main/MainView/DMView/DMView.vue
+++ b/src/components/Main/MainView/DMView/DMView.vue
@@ -18,6 +18,7 @@
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
         :viewing-users="viewingUsers"
+        :inactive-viewing-users="inactiveViewingUsers"
       />
     </template>
   </primary-view-frame>
@@ -42,5 +43,6 @@ const props = defineProps<{
 
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
-const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+const { viewingUsers, inactiveViewingUsers, typingUsers } =
+  useCurrentViewers(channelId)
 </script>
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index dd139fb99..601368223 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -150,7 +150,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'requestLoadFormer'): void
   (e: 'requestLoadLatter'): void
-  (e: 'resetIsReachedLatest'): void
+  (e: 'windowViewd'): void
   (e: 'scrollPassive'): void
 }>()
 
@@ -191,22 +191,21 @@ watch(
   (ids, prevIds) => {
     if (!rootRef.value) return
     /* state.height の更新を忘れないようにすること */
-
     const newHeight = rootRef.value.scrollHeight
+    if (ids.length - prevIds.length === -1) {
+      // 削除された場合は何もしない
+      state.height = newHeight
+      return
+    }
     if (
       props.lastLoadingDirection === 'latest' ||
-      props.lastLoadingDirection === 'former'
+      props.lastLoadingDirection === 'former' ||
+      props.isReachedLatest
     ) {
-      if (ids.length - prevIds.length === -1) {
-        // 削除された場合は何もしない
-        state.height = newHeight
-        return
-      }
       // XXX: 追加時にここは0になる
       if (ids.length - prevIds.length === 0) {
         const scrollBottom =
           rootRef.value.scrollTop + rootRef.value.clientHeight
-
         // 一番下のメッセージあたりを見ているときに、
         // 新規に一つ追加された場合は一番下までスクロール
         if (state.height - 50 <= scrollBottom) {
@@ -217,11 +216,13 @@ watch(
         state.height = newHeight
         return
       }
-      rootRef.value.scrollTo({
-        top: newHeight - state.height
-      })
-    }
-    state.height = newHeight
+      //上に追加された時はスクロール位置を変更する。
+      if (props.lastLoadingDirection === 'former') {
+        rootRef.value.scrollTo({
+          top: newHeight - state.height
+        })
+      }
+    } else state.height = newHeight
   },
   { deep: true, flush: 'post' }
 )
@@ -246,16 +247,27 @@ const requestLoadMessages = () => {
 const handleScroll = throttle(17, requestLoadMessages)
 
 const visibilitychangeListener = () => {
+  emit('windowViewd')
   if (document.visibilityState === 'visible') {
-    requestLoadMessages()
+    nextTick(requestLoadMessages)
   }
-  emit('resetIsReachedLatest')
+}
+const focusListener = () => {
+  emit('windowViewd')
+  nextTick(requestLoadMessages)
+}
+const blurListener = () => {
+  emit('windowViewd')
 }
 onMounted(() => {
   document.addEventListener('visibilitychange', visibilitychangeListener)
+  window.addEventListener('focus', focusListener)
+  window.addEventListener('blur', blurListener)
 })
 onUnmounted(() => {
   document.removeEventListener('visibilitychange', visibilitychangeListener)
+  window.removeEventListener('focus', focusListener)
+  window.removeEventListener('blur', blurListener)
 })
 
 const { onClick } = useMarkdownInternalHandler()
diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index 2cd10e424..807de3c4e 100644
--- a/src/components/UI/UserIcon.vue
+++ b/src/components/UI/UserIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :role="isClickable ? 'button' : 'img'"
-    :class="$style.container"
+    :class="[$style.container, isInactive && $style.transparent]"
     :style="styles.container"
     @click.prevent.stop="openModal"
   >
@@ -42,12 +42,14 @@ const props = withDefaults(
     indicatorSize?: number
     preventModal?: boolean
     hasNotification?: boolean
+    isInactive?: boolean
   }>(),
   {
     size: 36,
     indicatorSize: 10,
     preventModal: false,
-    hasNotification: false
+    hasNotification: false,
+    isInactive: false
   }
 )
 
@@ -109,4 +111,7 @@ const { isClickable, openModal } = useUserModalOpener(
   top: 0;
   right: 0;
 }
+.transparent {
+  opacity: 0.5;
+}
 </style>
diff --git a/src/components/UI/UserIconEllipsisList.vue b/src/components/UI/UserIconEllipsisList.vue
index 401c732dc..c36c419b8 100644
--- a/src/components/UI/UserIconEllipsisList.vue
+++ b/src/components/UI/UserIconEllipsisList.vue
@@ -15,6 +15,16 @@
       >
         +{{ inVisibleCount }}
       </span>
+      <user-icon
+        v-for="userId in visibleInactiveIconIds"
+        :key="userId"
+        :class="$style.userIcon"
+        :user-id="userId"
+        :size="iconSize"
+        :prevent-modal="preventModal"
+        :style="styles.userIcon"
+        is-inactive
+      />
       <user-icon
         v-for="userId in visibleIconIds"
         :key="userId"
@@ -40,6 +50,7 @@ const props = withDefaults(
     max?: number
     showCount?: boolean
     userIds?: readonly UserId[]
+    inactiveUserIds?: readonly UserId[]
     borderWidth?: number
     iconSize?: IconSize
     overlap?: number
@@ -51,6 +62,7 @@ const props = withDefaults(
     max: 3,
     showCount: true,
     userIds: () => [],
+    inactiveUserIds: () => [],
     borderWidth: 4,
     iconSize: 40 as const,
     overlap: 12,
@@ -91,7 +103,14 @@ const styles = computed(() => {
 const visibleIconIds = computed(() =>
   [...props.userIds].reverse().slice(0, props.max)
 )
-const inVisibleCount = computed(() => props.userIds.length - props.max)
+const visibleInactiveIconIds = computed(() =>
+  [...props.inactiveUserIds]
+    .reverse()
+    .slice(0, props.max - visibleIconIds.value.length)
+)
+const inVisibleCount = computed(
+  () => props.userIds.length + props.inactiveUserIds.length - props.max
+)
 
 const onCountClick = () => {
   if (props.countClickable) {
diff --git a/src/composables/useCurrentViewers.ts b/src/composables/useCurrentViewers.ts
index 37aacbada..6374f485f 100644
--- a/src/composables/useCurrentViewers.ts
+++ b/src/composables/useCurrentViewers.ts
@@ -16,7 +16,21 @@ const useCurrentViewers = (channelId: Ref<ChannelId>) => {
   /**
    * チャンネルを見ている人(入力中、バックグラウンド表示中も含む)のIDの一覧(古い順)
    */
-  const viewingUsers = computed(() => currentViewers.value.map(v => v.userId))
+  const viewingUsers = computed(() =>
+    currentViewers.value
+      .filter(
+        v =>
+          v.state === ChannelViewState.Monitoring ||
+          v.state === ChannelViewState.Editing
+      )
+      .map(v => v.userId)
+  )
+
+  const inactiveViewingUsers = computed(() =>
+    currentViewers.value
+      .filter(v => v.state === ChannelViewState.None)
+      .map(v => v.userId)
+  )
 
   /**
    * チャンネルで入力中の人のIDの一覧(新しい順)
@@ -36,7 +50,7 @@ const useCurrentViewers = (channelId: Ref<ChannelId>) => {
   })
   // NOTE: 再接続時にはCHANNEL_VIEWERS_CHANGEDが送られてくる
 
-  return { viewingUsers, typingUsers }
+  return { viewingUsers, typingUsers, inactiveViewingUsers }
 }
 
 export default useCurrentViewers
diff --git a/src/views/composables/useViewStateSender.ts b/src/views/composables/useViewStateSender.ts
index c584b8cb7..3bab0bca4 100644
--- a/src/views/composables/useViewStateSender.ts
+++ b/src/views/composables/useViewStateSender.ts
@@ -57,11 +57,31 @@ const useViewStateSender = () => {
     }
     changeViewState(currentChannelId.value, ChannelViewState.None)
   }
+  const focusListeiner = () => {
+    if (!currentChannelId.value) {
+      changeViewState(null)
+      return
+    }
+    changeViewState(currentChannelId.value, state.value)
+  }
+
+  const blurListeiner = () => {
+    if (!currentChannelId.value) {
+      changeViewState(null)
+      return
+    }
+    changeViewState(currentChannelId.value, ChannelViewState.None)
+  }
+
   onMounted(() => {
     document.addEventListener('visibilitychange', visibilitychangeListener)
+    window.addEventListener('focus', focusListeiner)
+    window.addEventListener('blur', blurListeiner)
   })
   onUnmounted(() => {
     document.removeEventListener('visibilitychange', visibilitychangeListener)
+    window.removeEventListener('focus', focusListeiner)
+    window.removeEventListener('blur', blurListeiner)
   })
 }