make the styling consistent across all pages of the mobile version

src/lib/map/amap.ts

@@ -1,8 +1,9 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import type { Coordinate } from '@/core/coordinate.ts';
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction, isArray } from '@/lib/common.ts';
 import { asyncLoadAssets } from '@/lib/misc.ts';
 import services from '@/lib/services.ts';
 import {
@@ -13,6 +14,7 @@ import {
 import logger from '@/lib/logger.ts';
 
 export class AmapMapProvider implements MapProvider {
+    // https://lbs.amap.com/api/javascript-api-v2/documentation
     public static AMap: unknown = null;
 
     public getWebsite(): string {
@@ -52,8 +54,8 @@ export class AmapMapProvider implements MapProvider {
         return asyncLoadAssets('js', services.generateAmapJavascriptUrl('onAMapCallback'));
     }
 
-    public createMapInstance(): MapInstance | null {
-        return new AmapMapInstance();
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
+        return new AmapMapInstance(options);
     }
 }
 
@@ -61,16 +63,19 @@ export class AmapMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number = 14;
-    public readonly minZoomLevel: number = 1;
+    private readonly defaultZoomLevel: number = 14;
+    private readonly minZoomLevel: number = 2;
+    private readonly maxZoomLevel: number = 19;
 
+    private readonly mapCreateOptions: MapCreateOptions;
     private amapInstance: unknown = null;
     private amapToolbar: unknown = null;
     private amapCenterPosition: unknown = null;
     private amapCenterMarker: unknown | null;
 
-    public constructor() {
+    public constructor(options: MapCreateOptions) {
         this.dependencyLoaded = !!AmapMapProvider.AMap;
+        this.mapCreateOptions = options;
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -86,10 +91,12 @@ export class AmapMapInstance implements MapInstance {
             jogEnable: false
         });
 
-        const amapToolbar = new AMap.ToolBar({
-            position: 'LT'
-        });
-        amapInstance.addControl(amapToolbar);
+        if (this.mapCreateOptions.enableZoomControl) {
+            this.amapToolbar = new AMap.ToolBar({
+                position: 'LT'
+            });
+            amapInstance.addControl(this.amapToolbar);
+        }
 
         amapInstance.on('click', function(e) {
             if (options.onClick) {
@@ -100,11 +107,56 @@ export class AmapMapInstance implements MapInstance {
             }
         });
 
+        amapInstance.on('zoomend', function() {
+            if (options.onZoomChange && isFunction(amapInstance.getZoom)) {
+                options.onZoomChange(amapInstance.getZoom());
+            }
+        });
+
         this.amapInstance = amapInstance;
-        this.amapToolbar = amapToolbar;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        if (!this.amapInstance || !isFunction(this.amapInstance.getZooms)) {
+            return this.minZoomLevel;
+        }
+
+        const zooms = this.amapInstance.getZooms();
+
+        if (!zooms || !isArray(zooms) || zooms.length !== 2) {
+            return this.minZoomLevel;
+        }
+
+        return zooms[0];
+    }
+
+    public getMaxZoomLevel(): number {
+        if (!this.amapInstance || !isFunction(this.amapInstance.getZooms)) {
+            return this.maxZoomLevel;
+        }
+
+        const zooms = this.amapInstance.getZooms();
+
+        if (!zooms || !isArray(zooms) || zooms.length !== 2) {
+            return this.maxZoomLevel;
+        }
+
+        return zooms[1];
+    }
+
+    public getZoomLevel(): number {
+        if (!this.amapInstance || !isFunction(this.amapInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.amapInstance?.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!AmapMapProvider.AMap || !this.amapInstance) {
             return;
@@ -187,6 +239,22 @@ export class AmapMapInstance implements MapInstance {
         this.amapCenterMarker = null;
     }
 
+    public zoomIn(): void {
+        if (!this.amapInstance) {
+            return;
+        }
+
+        this.amapInstance.zoomIn();
+    }
+
+    public zoomOut(): void {
+        if (!this.amapInstance) {
+            return;
+        }
+
+        this.amapInstance.zoomOut();
+    }
+
     private setMaker(point: unknown): void {
         if (!AmapMapProvider.AMap || !this.amapInstance) {
             return;

src/lib/map/baidumap.ts

@@ -1,13 +1,15 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import type { Coordinate } from '@/core/coordinate.ts';
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction } from '@/lib/common.ts';
 import { asyncLoadAssets } from '@/lib/misc.ts';
 import services from '@/lib/services.ts';
 import logger from '@/lib/logger.ts';
 
 export class BaiduMapProvider implements MapProvider {
+    // https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html
     public static BMap: unknown = null;
     public static BMAP_NAVIGATION_CONTROL_ZOOM: unknown = window.BMAP_NAVIGATION_CONTROL_ZOOM || 3;
     public static BMAP_ANCHOR_TOP_LEFT: unknown = window.BMAP_ANCHOR_TOP_LEFT || 0;
@@ -41,8 +43,8 @@ export class BaiduMapProvider implements MapProvider {
         return asyncLoadAssets('js', services.generateBaiduMapJavascriptUrl('onBMapCallback'));
     }
 
-    public createMapInstance(): MapInstance | null {
-        return new BaiduMapInstance();
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
+        return new BaiduMapInstance(options);
     }
 }
 
@@ -50,17 +52,20 @@ export class BaiduMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number = 15;
-    public readonly minZoomLevel: number = 1;
+    private readonly defaultZoomLevel: number = 15;
+    private readonly minZoomLevel: number = 4;
+    private readonly maxZoomLevel: number = 19;
 
+    private readonly mapCreateOptions: MapCreateOptions;
     private baiduMapInstance: unknown = null;
     private baiduMapConverter: unknown = null;
     private baiduMapNavigationControl: unknown = null;
     private baiduMapCenterPosition: unknown = null;
     private baiduMapCenterMarker: unknown | null;
 
-    public constructor() {
+    public constructor(options: MapCreateOptions) {
         this.dependencyLoaded = !!BaiduMapProvider.BMap;
+        this.mapCreateOptions = options;
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -74,11 +79,14 @@ export class BaiduMapInstance implements MapInstance {
         });
         baiduMapInstance.enableScrollWheelZoom();
 
-        const baiduMapNavigationControl = new BMap.NavigationControl({
-            type: BaiduMapProvider.BMAP_NAVIGATION_CONTROL_ZOOM,
-            anchor: BaiduMapProvider.BMAP_ANCHOR_TOP_LEFT
-        });
-        baiduMapInstance.addControl(baiduMapNavigationControl);
+        if (this.mapCreateOptions.enableZoomControl) {
+            this.baiduMapNavigationControl = new BMap.NavigationControl({
+                type: BaiduMapProvider.BMAP_NAVIGATION_CONTROL_ZOOM,
+                anchor: BaiduMapProvider.BMAP_ANCHOR_TOP_LEFT
+            });
+            baiduMapInstance.addControl(this.baiduMapNavigationControl);
+        }
+
         baiduMapInstance.centerAndZoom(new BMap.Point(options.initCenter.longitude, options.initCenter.latitude), options.zoomLevel);
 
         baiduMapInstance.addEventListener('click', function(e) {
@@ -90,12 +98,57 @@ export class BaiduMapInstance implements MapInstance {
             }
         });
 
+        baiduMapInstance.addEventListener('zoomend', function() {
+            if (options.onZoomChange && isFunction(baiduMapInstance.getZoom)) {
+                options.onZoomChange(baiduMapInstance.getZoom());
+            }
+        });
+
         this.baiduMapInstance = baiduMapInstance;
         this.baiduMapConverter = new BMap.Convertor();
-        this.baiduMapNavigationControl = baiduMapNavigationControl;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getMapType)) {
+            return this.minZoomLevel;
+        }
+
+        const mapType = this.baiduMapInstance.getMapType();
+
+        if (!mapType || !isFunction(mapType.getMinZoom)) {
+            return this.minZoomLevel;
+        }
+
+        return mapType.getMinZoom() ?? this.minZoomLevel;
+    }
+
+    public getMaxZoomLevel(): number {
+        if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getMapType)) {
+            return this.maxZoomLevel;
+        }
+
+        const mapType = this.baiduMapInstance.getMapType();
+
+        if (!mapType || !isFunction(mapType.getMaxZoom)) {
+            return this.maxZoomLevel;
+        }
+
+        return mapType.getMaxZoom() ?? this.maxZoomLevel;
+    }
+
+    public getZoomLevel(): number {
+        if (!this.baiduMapInstance || !isFunction(this.baiduMapInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.baiduMapInstance.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!BaiduMapProvider.BMap || !this.baiduMapInstance) {
             return;
@@ -186,6 +239,22 @@ export class BaiduMapInstance implements MapInstance {
         this.baiduMapCenterMarker = null;
     }
 
+    public zoomIn(): void {
+        if (!this.baiduMapInstance) {
+            return;
+        }
+
+        this.baiduMapInstance.zoomIn();
+    }
+
+    public zoomOut(): void {
+        if (!this.baiduMapInstance) {
+            return;
+        }
+
+        this.baiduMapInstance.zoomOut();
+    }
+
     private setMaker(point: unknown): void {
         if (!BaiduMapProvider.BMap || !this.baiduMapInstance) {
             return;

src/lib/map/base.ts

@@ -4,18 +4,26 @@ export interface MapProvider {
     getWebsite(): string;
     isSupportGetGeoLocationByClick(): boolean;
     asyncLoadAssets(language?: string): Promise<unknown>;
-    createMapInstance(): MapInstance | null;
+    createMapInstance(options: MapCreateOptions): MapInstance | null;
 }
 
 export interface MapInstance {
     dependencyLoaded: boolean;
     inited: boolean;
-    readonly defaultZoomLevel: number;
-    readonly minZoomLevel: number;
     initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void;
+    getDefaultZoomLevel(): number;
+    getMinZoomLevel(): number;
+    getMaxZoomLevel(): number;
+    getZoomLevel(): number;
     setMapCenterTo(center: Coordinate, zoomLevel: number): void;
     setMapCenterMarker(position: Coordinate): void;
     removeMapCenterMarker(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+}
+
+export interface MapCreateOptions {
+    readonly enableZoomControl?: boolean;
 }
 
 export interface MapInstanceInitOptions {
@@ -27,4 +35,5 @@ export interface MapInstanceInitOptions {
         readonly zoomOut: string;
     };
     readonly onClick?: (position: Coordinate) => void;
+    readonly onZoomChange?: (level: number) => void;
 }

src/lib/map/googlemap.ts

@@ -1,12 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import type { Coordinate } from '@/core/coordinate.ts';
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction } from '@/lib/common.ts';
 import { asyncLoadAssets } from '@/lib/misc.ts';
 import services from '@/lib/services.ts';
 
 export class GoogleMapProvider implements MapProvider {
+    // https://developers.google.com/maps/documentation/javascript/reference/map
     public static GoogleMap: unknown = null;
     public static ControlPosition = {
         LEFT_TOP: (window.google && window.google.maps && window.google.maps.ControlPosition) ? window.google.maps.ControlPosition.LEFT_TOP : 5
@@ -37,8 +39,8 @@ export class GoogleMapProvider implements MapProvider {
         return asyncLoadAssets('js', services.generateGoogleMapJavascriptUrl(language, 'onGoogleMapCallback'));
     }
 
-    public createMapInstance(): MapInstance | null {
-        return new GoogleMapInstance();
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
+        return new GoogleMapInstance(options);
     }
 }
 
@@ -46,14 +48,17 @@ export class GoogleMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number = 14;
-    public readonly minZoomLevel: number = 1;
+    private readonly defaultZoomLevel: number = 14;
+    private readonly minZoomLevel: number = 0;
+    private readonly maxZoomLevel: number = 19;
 
+    private readonly mapCreateOptions: MapCreateOptions;
     private googleMapInstance: unknown = null;
     private googleMapCenterMarker: unknown | null;
 
-    public constructor() {
+    public constructor(options: MapCreateOptions) {
         this.dependencyLoaded = !!GoogleMapProvider.GoogleMap;
+        this.mapCreateOptions = options;
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -62,27 +67,26 @@ export class GoogleMapInstance implements MapInstance {
         }
 
         const googleMap = GoogleMapProvider.GoogleMap;
-
-        this.googleMapInstance = new googleMap.Map(mapContainer, {
+        const googleMapInstance = new googleMap.Map(mapContainer, {
             zoom: options.zoomLevel,
             center: {
                 lat: options.initCenter.latitude,
                 lng: options.initCenter.longitude
             },
             maxZoom: 19,
-            zoomControl: true,
+            zoomControl: !!this.mapCreateOptions.enableZoomControl,
             mapTypeControl: false,
             scaleControl: false,
             streetViewControl: false,
             rotateControl: false,
             fullscreenControl: false,
             gestureHandling: 'greedy',
-            zoomControlOptions: {
+            zoomControlOptions: this.mapCreateOptions.enableZoomControl ? {
                 position: GoogleMapProvider.ControlPosition.LEFT_TOP
-            }
+            } : undefined
         });
 
-        this.googleMapInstance.addListener('click', function(e) {
+        googleMapInstance.addListener('click', function(e) {
             if (options.onClick) {
                 options.onClick({
                     latitude: e.latLng.lat(),
@@ -91,9 +95,36 @@ export class GoogleMapInstance implements MapInstance {
             }
         });
 
+        googleMapInstance.addListener('zoom_changed', function() {
+            if (options.onZoomChange && isFunction(googleMapInstance.getZoom)) {
+                options.onZoomChange(googleMapInstance.getZoom());
+            }
+        });
+
+        this.googleMapInstance = googleMapInstance;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        return this.minZoomLevel;
+    }
+
+    public getMaxZoomLevel(): number {
+        return this.maxZoomLevel;
+    }
+
+    public getZoomLevel(): number {
+        if (!this.googleMapInstance || !isFunction(this.googleMapInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.googleMapInstance.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!GoogleMapProvider.GoogleMap || !this.googleMapInstance) {
             return;
@@ -129,6 +160,22 @@ export class GoogleMapInstance implements MapInstance {
         }
     }
 
+    public zoomIn(): void {
+        if (!this.googleMapInstance) {
+            return;
+        }
+
+        this.googleMapInstance.setZoom(this.googleMapInstance.getZoom() + 1);
+    }
+
+    public zoomOut(): void {
+        if (!this.googleMapInstance) {
+            return;
+        }
+
+        this.googleMapInstance.setZoom(this.googleMapInstance.getZoom() - 1);
+    }
+
     public removeMapCenterMarker(): void {
         if (!this.googleMapInstance || !this.googleMapCenterMarker) {
             return;

src/lib/map/index.ts

@@ -1,7 +1,7 @@
 import { LEAFLET_TILE_SOURCES } from '@/consts/map.ts';
 import { getMapProvider } from '@/lib/server_settings.ts';
 
-import type { MapProvider, MapInstance } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions } from './base.ts';
 import { LeafletMapProvider } from './leaflet.ts';
 import { GoogleMapProvider } from './googlemap.ts';
 import { BaiduMapProvider } from './baidumap.ts';
@@ -35,6 +35,6 @@ export function isSupportGetGeoLocationByClick(): boolean {
     return mapProvider?.isSupportGetGeoLocationByClick() || false;
 }
 
-export function createMapInstance(): MapInstance | null {
-    return mapProvider?.createMapInstance() || null;
+export function createMapInstance(options: MapCreateOptions): MapInstance | null {
+    return mapProvider?.createMapInstance(options) || null;
 }

src/lib/map/leaflet.ts

@@ -4,8 +4,9 @@ import type { Coordinate } from '@/core/coordinate.ts';
 
 import { type LeafletTileSource, type LeafletTileSourceExtraParam, LEAFLET_TILE_SOURCES } from '@/consts/map.ts';
 
-import type { MapProvider, MapInstance, MapInstanceInitOptions } from './base.ts';
+import type { MapProvider, MapInstance, MapCreateOptions, MapInstanceInitOptions } from './base.ts';
 
+import { isFunction, isNumber } from '@/lib/common.ts';
 import {
     isMapDataFetchProxyEnabled,
     getCustomMapTileLayerUrl,
@@ -20,6 +21,7 @@ import {
 import services from '@/lib/services.ts';
 
 export class LeafletMapProvider implements MapProvider {
+    // https://leafletjs.com/reference.html#pan-options
     public static Leaflet: unknown = null;
     private readonly mapProvider: string;
 
@@ -49,14 +51,14 @@ export class LeafletMapProvider implements MapProvider {
         ]);
     }
 
-    public createMapInstance(): MapInstance | null {
+    public createMapInstance(options: MapCreateOptions): MapInstance | null {
         const mapTileSource = LEAFLET_TILE_SOURCES[this.mapProvider];
 
         if (this.mapProvider !== 'custom' && !mapTileSource) {
             return null;
         }
 
-        return new LeafletMapInstance(this.mapProvider, mapTileSource);
+        return new LeafletMapInstance(this.mapProvider, mapTileSource, options);
     }
 }
 
@@ -64,11 +66,13 @@ export class LeafletMapInstance implements MapInstance {
     public dependencyLoaded: boolean = false;
     public inited: boolean = false;
 
-    public readonly defaultZoomLevel: number;
-    public readonly minZoomLevel: number;
+    private readonly defaultZoomLevel: number;
+    private readonly minZoomLevel: number;
+    private readonly maxZoomLevel: number;
 
     private readonly mapProvider: string;
     private readonly presetMapTileSource: LeafletTileSource;
+    private readonly mapCreateOptions: MapCreateOptions;
 
     private leafletInstance: unknown | null;
     private leafletTileLayer: unknown | null;
@@ -77,14 +81,16 @@ export class LeafletMapInstance implements MapInstance {
     private leafletAttribution: unknown | null;
     private leafletCenterMarker: unknown | null;
 
-    public constructor(mapProvider: string, mapTileSource: LeafletTileSource) {
+    public constructor(mapProvider: string, mapTileSource: LeafletTileSource, options: MapCreateOptions) {
         this.dependencyLoaded = !!LeafletMapProvider.Leaflet;
 
         this.mapProvider = mapProvider;
         this.presetMapTileSource = mapTileSource;
+        this.mapCreateOptions = options;
 
         this.defaultZoomLevel = this.presetMapTileSource?.defaultZoomLevel || getCustomMapDefaultZoomLevel();
         this.minZoomLevel = this.presetMapTileSource?.minZoom || getCustomMapMinZoomLevel();
+        this.maxZoomLevel = this.presetMapTileSource?.maxZoom || getCustomMapMaxZoomLevel();
     }
 
     public initMapInstance(mapContainer: HTMLElement, options: MapInstanceInitOptions): void {
@@ -149,11 +155,13 @@ export class LeafletMapInstance implements MapInstance {
             this.leafletAnnotationLayer = annotationLayer;
         }
 
-        const zoomControl = leaflet.control.zoom({
-            zoomInTitle: options.text.zoomIn,
-            zoomOutTitle: options.text.zoomOut
-        });
-        zoomControl.addTo(leafletInstance);
+        if (this.mapCreateOptions.enableZoomControl) {
+            this.leafletZoomControl = leaflet.control.zoom({
+                zoomInTitle: options.text.zoomIn,
+                zoomOutTitle: options.text.zoomOut
+            });
+            this.leafletZoomControl.addTo(leafletInstance);
+        }
 
         if (this.presetMapTileSource && this.presetMapTileSource.attribution) {
             const attribution = leaflet.control.attribution({
@@ -173,12 +181,37 @@ export class LeafletMapInstance implements MapInstance {
             }
         });
 
+        leafletInstance.addEventListener('zoomanim', function(e) {
+            if (options.onZoomChange && 'zoom' in e && isNumber(e.zoom)) {
+                options.onZoomChange(e.zoom);
+            }
+        });
+
         this.leafletInstance = leafletInstance;
         this.leafletTileLayer = tileLayer;
-        this.leafletZoomControl = zoomControl;
         this.inited = true;
     }
 
+    public getDefaultZoomLevel(): number {
+        return this.defaultZoomLevel;
+    }
+
+    public getMinZoomLevel(): number {
+        return this.minZoomLevel;
+    }
+
+    public getMaxZoomLevel(): number {
+        return this.maxZoomLevel;
+    }
+
+    public getZoomLevel(): number {
+        if (!this.leafletInstance || !isFunction(this.leafletInstance.getZoom)) {
+            return this.defaultZoomLevel;
+        }
+
+        return this.leafletInstance.getZoom() ?? this.defaultZoomLevel;
+    }
+
     public setMapCenterTo(center: Coordinate, zoomLevel: number): void {
         if (!this.leafletInstance) {
             return;
@@ -221,6 +254,22 @@ export class LeafletMapInstance implements MapInstance {
         this.leafletCenterMarker = null;
     }
 
+    public zoomIn(): void {
+        if (!this.leafletInstance) {
+            return;
+        }
+
+        this.leafletInstance.zoomIn();
+    }
+
+    public zoomOut(): void {
+        if (!this.leafletInstance) {
+            return;
+        }
+
+        this.leafletInstance.zoomOut();
+    }
+
     private getFinalUrlFormat(urlFormat: string, urlExtraParams: LeafletTileSourceExtraParam[], options: MapInstanceInitOptions) {
         const params: string[] = [];
 

src/lib/ui/mobile.ts

@@ -138,7 +138,7 @@ export function getElementBoundingRect(selector: string): DOMRect | null {
     return el.getBoundingClientRect();
 }
 
-export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string): void {
+export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string, hasBottomToolbar?: boolean): void {
     if (!parentEl || !parentEl.length) {
         return;
     }
@@ -175,6 +175,11 @@ export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector:
         return;
     }
 
+    if (hasBottomToolbar) {
+        const toolbarHeight = parentEl.find('.toolbar.toolbar-bottom').outerHeight() || 0;
+        targetPos += toolbarHeight / 2;
+    }
+
     container.scrollTop(targetPos);
 }